Ggtcf

Languages that we cannot (dis)prove to be Context-Free

Has the BBC provided arguments for saying Brexit being cancelled is unlikely?

Show that if two triangles built on parallel lines, with equal bases have the same perimeter only if they are congruent.

Modeling an IPv4 Address

"You are your self first supporter", a more proper way to say it

What do you call a Matrix-like slowdown and camera movement effect?

is there really no realistic way for skeleton monster to move around without magic?

What would happen to a modern skyscraper if it rains micro blackholes?

What's the output of a record cartridge playing an out-of-speed record

Explain the parameters before and after @ in the treminal

Why don't electromagnetic waves interact with each other?

Risk of getting Chronic Wasting Disease (CWD) in the United States?

Email Account under attack (really) - anything I can do?

Is it legal for company to use my work email to pretend I still work there?

How do you know if an analog film camera is still working?

What do the dots in this tr command do: tr .............A-Z A-ZA-Z <<< "JVPQBOV" (with 13 dots)

Smoothness of finite-dimensional functional calculus

The magic money tree problem

How to test if a transaction is standard without spending real money?

How to say job offer in Mandarin/Cantonese?

Is it tax fraud for an individual to declare non-taxable revenue as taxable income? (US tax laws)

How is the claim "I am in New York only if I am in America" the same as "If I am in New York, then I am in America?

Are the number of citations and number of published articles the most important criteria for a tenure promotion?

The use of multiple foreign keys on same column in SQL Server

How do I center child div in parent and have it fixed to the top?

How to horizontally center a <div>?Expanding a parent <div> to the height of its childrenHow to vertically center a div for all browsers?How to make div not larger than its contents?How to make a div 100% height of the browser window?CSS horizontal centering of a fixed div?Vertically centering a div inside another divHow do I vertically center text with CSS?Position absolute but relative to parentCenter image horizontally within a div

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

I am trying to have a child div be centered horizontally (left/right) within the parent div and also fixed to the top of the parent div but I cant figure out how to do this in CSS :-( I can center it and I can fix it but anytime I try to combine the child div just gets fixed in its natural place (to the left).

EDIT: Child needs to be fixed to the top so when other children overflow they can be scrolled but it would stay in place.

html css

share|improve this question

edited Mar 9 at 3:47

donL

asked Mar 9 at 3:18

donLdonL

7592733

add a comment | 

2

I am trying to have a child div be centered horizontally (left/right) within the parent div and also fixed to the top of the parent div but I cant figure out how to do this in CSS :-( I can center it and I can fix it but anytime I try to combine the child div just gets fixed in its natural place (to the left).

EDIT: Child needs to be fixed to the top so when other children overflow they can be scrolled but it would stay in place.

html css

share|improve this question

edited Mar 9 at 3:47

donL

asked Mar 9 at 3:18

donLdonL

7592733

add a comment | 

I am trying to have a child div be centered horizontally (left/right) within the parent div and also fixed to the top of the parent div but I cant figure out how to do this in CSS :-( I can center it and I can fix it but anytime I try to combine the child div just gets fixed in its natural place (to the left).

EDIT: Child needs to be fixed to the top so when other children overflow they can be scrolled but it would stay in place.

html css

share|improve this question

edited Mar 9 at 3:47

donL

asked Mar 9 at 3:18

donLdonL

7592733

share|improve this question

edited Mar 9 at 3:47

donL

asked Mar 9 at 3:18

donLdonL

7592733

share|improve this question

edited Mar 9 at 3:47

donL

asked Mar 9 at 3:18

donLdonL

7592733

asked Mar 9 at 3:18

donLdonL

7592733

asked Mar 9 at 3:18

donLdonL

7592733

4 Answers
4

active

oldest

votes

3

Use flexbox - there's a reason why the major difference between Bootstrap3 and Bootstrap4 is switching from floats to flexbox!

Example:

#parentheight:100px;background:red;
#parentdisplay:flex;align-items:flex-start;justify-content:center;

#childbackground:yellow;

XXX#childflex-grow:1;text-align:center; /* Uncomment if you want row to be full-width */

<div id="parent">
 <div id="child">
 Here is some text
 </div>
</div>

References:

Excellent flexbox cheatsheet

Excellenter short Video Tutorial

share|improve this answer

answered Mar 9 at 3:30

gibberishgibberish

22k105983

add a comment | 

1

.parent
 position: relative; // This is important


.child
 position: absolute;
 top:0;
 left: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:26

Prithwee DasPrithwee Das

684510

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  parent being relative didn't seem to make a difference for me in the end.
  
  – donL
  Mar 9 at 4:08
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  when you make an element position: absolute;, It will be positioned relative to the closest parent with a position defiled other than static (static is the default). So if you don't make your parent relative your child will be positioned relative to the document body.
  
  – Prithwee Das
  Mar 9 at 4:12
  
  

  
  
  
  

add a comment | 

0

Try out following code

<div class="container">
 <div class="child"></div>
</div>

css is here

.container 
 width: 100%;
 background-color: orangered;
 height: 200px;
 position: relative;

.child
 width: 200px;
 height: 100px;
 background-color: brown;
 position: fixed;
 left: 50%;
 right: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:30

UsmanUsman

3839

add a comment | 

0

It looks like this was the solution:

.child
 position: fixed;
 left: 50%;
 transform: translateX(-50%);

thank you @Prithwee Das for the transform hint.

share|improve this answer

answered Mar 9 at 4:07

donLdonL

7592733

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073663%2fhow-do-i-center-child-div-in-parent-and-have-it-fixed-to-the-top%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

3

Use flexbox - there's a reason why the major difference between Bootstrap3 and Bootstrap4 is switching from floats to flexbox!

Example:

#parentheight:100px;background:red;
#parentdisplay:flex;align-items:flex-start;justify-content:center;

#childbackground:yellow;

XXX#childflex-grow:1;text-align:center; /* Uncomment if you want row to be full-width */

<div id="parent">
 <div id="child">
 Here is some text
 </div>
</div>

References:

Excellent flexbox cheatsheet

Excellenter short Video Tutorial

share|improve this answer

answered Mar 9 at 3:30

gibberishgibberish

22k105983

add a comment | 

3

Use flexbox - there's a reason why the major difference between Bootstrap3 and Bootstrap4 is switching from floats to flexbox!

Example:

#parentheight:100px;background:red;
#parentdisplay:flex;align-items:flex-start;justify-content:center;

#childbackground:yellow;

XXX#childflex-grow:1;text-align:center; /* Uncomment if you want row to be full-width */

<div id="parent">
 <div id="child">
 Here is some text
 </div>
</div>

References:

Excellent flexbox cheatsheet

Excellenter short Video Tutorial

share|improve this answer

answered Mar 9 at 3:30

gibberishgibberish

22k105983

add a comment | 

Use flexbox - there's a reason why the major difference between Bootstrap3 and Bootstrap4 is switching from floats to flexbox!

Example:

#parentheight:100px;background:red;
#parentdisplay:flex;align-items:flex-start;justify-content:center;

#childbackground:yellow;

XXX#childflex-grow:1;text-align:center; /* Uncomment if you want row to be full-width */

<div id="parent">
 <div id="child">
 Here is some text
 </div>
</div>

References:

Excellent flexbox cheatsheet

Excellenter short Video Tutorial

share|improve this answer

answered Mar 9 at 3:30

gibberishgibberish

22k105983

#parentheight:100px;background:red;
#parentdisplay:flex;align-items:flex-start;justify-content:center;

#childbackground:yellow;

XXX#childflex-grow:1;text-align:center; /* Uncomment if you want row to be full-width */

<div id="parent">
 <div id="child">
 Here is some text
 </div>
</div>

#parentheight:100px;background:red;
#parentdisplay:flex;align-items:flex-start;justify-content:center;

#childbackground:yellow;

XXX#childflex-grow:1;text-align:center; /* Uncomment if you want row to be full-width */

<div id="parent">
 <div id="child">
 Here is some text
 </div>
</div>

#parentheight:100px;background:red;
#parentdisplay:flex;align-items:flex-start;justify-content:center;

#childbackground:yellow;

XXX#childflex-grow:1;text-align:center; /* Uncomment if you want row to be full-width */

<div id="parent">
 <div id="child">
 Here is some text
 </div>
</div>

share|improve this answer

answered Mar 9 at 3:30

gibberishgibberish

22k105983

answered Mar 9 at 3:30

gibberishgibberish

22k105983

answered Mar 9 at 3:30

gibberishgibberish

22k105983

1

.parent
 position: relative; // This is important


.child
 position: absolute;
 top:0;
 left: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:26

Prithwee DasPrithwee Das

684510

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  parent being relative didn't seem to make a difference for me in the end.
  
  – donL
  Mar 9 at 4:08
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  when you make an element position: absolute;, It will be positioned relative to the closest parent with a position defiled other than static (static is the default). So if you don't make your parent relative your child will be positioned relative to the document body.
  
  – Prithwee Das
  Mar 9 at 4:12
  
  

  
  
  
  

add a comment | 

1

.parent
 position: relative; // This is important


.child
 position: absolute;
 top:0;
 left: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:26

Prithwee DasPrithwee Das

684510

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  parent being relative didn't seem to make a difference for me in the end.
  
  – donL
  Mar 9 at 4:08
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  when you make an element position: absolute;, It will be positioned relative to the closest parent with a position defiled other than static (static is the default). So if you don't make your parent relative your child will be positioned relative to the document body.
  
  – Prithwee Das
  Mar 9 at 4:12
  
  

  
  
  
  

add a comment | 

.parent
 position: relative; // This is important


.child
 position: absolute;
 top:0;
 left: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:26

Prithwee DasPrithwee Das

684510

.parent
 position: relative; // This is important


.child
 position: absolute;
 top:0;
 left: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:26

Prithwee DasPrithwee Das

684510

answered Mar 9 at 3:26

Prithwee DasPrithwee Das

684510

answered Mar 9 at 3:26

Prithwee DasPrithwee Das

684510

0

Try out following code

<div class="container">
 <div class="child"></div>
</div>

css is here

.container 
 width: 100%;
 background-color: orangered;
 height: 200px;
 position: relative;

.child
 width: 200px;
 height: 100px;
 background-color: brown;
 position: fixed;
 left: 50%;
 right: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:30

UsmanUsman

3839

add a comment | 

0

Try out following code

<div class="container">
 <div class="child"></div>
</div>

css is here

.container 
 width: 100%;
 background-color: orangered;
 height: 200px;
 position: relative;

.child
 width: 200px;
 height: 100px;
 background-color: brown;
 position: fixed;
 left: 50%;
 right: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:30

UsmanUsman

3839

add a comment | 

Try out following code

<div class="container">
 <div class="child"></div>
</div>

css is here

.container 
 width: 100%;
 background-color: orangered;
 height: 200px;
 position: relative;

.child
 width: 200px;
 height: 100px;
 background-color: brown;
 position: fixed;
 left: 50%;
 right: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:30

UsmanUsman

3839

<div class="container">
 <div class="child"></div>
</div>

.container 
 width: 100%;
 background-color: orangered;
 height: 200px;
 position: relative;

.child
 width: 200px;
 height: 100px;
 background-color: brown;
 position: fixed;
 left: 50%;
 right: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 3:30

UsmanUsman

3839

answered Mar 9 at 3:30

UsmanUsman

3839

answered Mar 9 at 3:30

UsmanUsman

3839

0

It looks like this was the solution:

.child
 position: fixed;
 left: 50%;
 transform: translateX(-50%);

thank you @Prithwee Das for the transform hint.

share|improve this answer

answered Mar 9 at 4:07

donLdonL

7592733

add a comment | 

0

It looks like this was the solution:

.child
 position: fixed;
 left: 50%;
 transform: translateX(-50%);

thank you @Prithwee Das for the transform hint.

share|improve this answer

answered Mar 9 at 4:07

donLdonL

7592733

add a comment | 

It looks like this was the solution:

.child
 position: fixed;
 left: 50%;
 transform: translateX(-50%);

thank you @Prithwee Das for the transform hint.

share|improve this answer

answered Mar 9 at 4:07

donLdonL

7592733

.child
 position: fixed;
 left: 50%;
 transform: translateX(-50%);

share|improve this answer

answered Mar 9 at 4:07

donLdonL

7592733

answered Mar 9 at 4:07

donLdonL

7592733

answered Mar 9 at 4:07

donLdonL

7592733