CODEWITHSUNDEEP
htmlcss
user3386779
user3386779

Reputation: 7215

css for centering the div tag

I want to display my div tag in center of the screen.I draw my screen as black color ,current display position of div tag in red color(which I unexpected) and my preferd location of div tag in green color.enter image description here

 .welcome{
 margin-left:20%
  font-size: 10px;
   border:1px solid #6AA121;
    width :60%;
    height:100px;
   background-color:#C3FDB8;
    position: absolute;
 }
 <div class="welcome">
   </div>

I want to display in middle.

Upvotes: 1

Views: 58

Answers (7)

SW4
SW4

Reputation: 71240

Use transform:translateX

With the use of absolute positioning, the most flexible approach would be to offset the right hand edge of the div by 50% of the parent width, then by 50% of its own width using the transform property, translateX

The advantage is you dont need to rely on specifying absolute width/offset values in, e.g. px, so the div will remain centered if its dimensions change.

Additionally- for positioning; top/right/bottom/left should be used where possible in place of any margin or padding values, this approach also follows this.

.welcome {
  font-size: 10px;
  border: 1px solid #6AA121;
  width: 60%;
  height: 100px;
  background-color: #C3FDB8;
  position: absolute;
  left: 50%; /* <--- move div right by 50% of parent width */
  transform: translateX(-50%); /* <--- move div left by 50% of its own width */
}
<div class="welcome">
</div>

translateX is well supported, see here for a full rundown, the main point to note is that transforms require the -ms- prefix in IE9.and you will need -webkit- for iOS/Safari.

Upvotes: 4

Mac_W
Mac_W

Reputation: 2987

I think that you can try an easier way. Try to remove absolute positioning and set margin left and margin right on auto. Like in the example below.

.welcome {
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  border:1px solid #6AA121;
  width :60%;
  height:100px;
  background-color:#C3FDB8;
 }

Upvotes: 0

jbutler483
jbutler483

Reputation: 24559

NOTICE

After going over your code again, it's become apparent that you are missing the ; after your margin left, and so the browser is ignoring it (hence why your code isn't working). However, you might find it a better alternative to use the left, right, top and bottom properties instead:

enter image description here

My Approach

since you are using position: absolute;, and you've given your div a width of 60%, you can use:

left:20%;

Since your width is 60%; leaving 40% of screen available.

40/2 (left and right gap) = 20% either side

Leaving:

.welcome {
  font-size: 10px;
  border: 1px solid #6AA121;
  width: 60%;
  height: 100px;
  background-color: #C3FDB8;
  position: absolute;
  left:20%;
}
<div class="welcome">
</div>

Upvotes: 3

G.L.P
G.L.P

Reputation: 7217

Try like this : DEMO

If absolute position is not needed, then use like this: CSS:

.welcome {
    font-size: 10px;
    border:1px solid #6AA121;
    width :60%;
    height:100px;
    background-color:#C3FDB8;
    position: relative;
    margin:0 auto;
}

If you need Position:absolute, then use like this: DEMO

.welcome {
    font-size: 10px;
    border:1px solid #6AA121;
    width :60%;
    height:100px;
    background-color:#C3FDB8;
    position: absolute;
    left:20%;
}

Upvotes: 1

Waseem Bepari
Waseem Bepari

Reputation: 336

.welcome{
 margin-left:20%
  font-size: 10px;
   border:1px solid #6AA121;
    width :60%;
    height:100px;
   background-color:#C3FDB8;
    position: relative; /* change absolute to relative */
  margin : auto; /* & set margin to auto*/
 }
<div class="welcome">
   </div>

Upvotes: 1

user3525867
user3525867

Reputation:

margin-left doesn't work properly with position: absolute (at least not in the way you are using it).

What you should write is this:

width: 60%;
left: 20%; // notice how this isn't margin-left
position: absolute;

This will centre the div.

If your div has a fixed width (e.g. 500px), try this:

width: 500px;
left: 50%;
margin-left: -250px;
position: absolute;

This works, and is the "correct" way of using margin-left with position: absolute.

Upvotes: 0

Sinister Beard
Sinister Beard

Reputation: 3680

You need to specify a width and then set the margins to auto. E.g.:

.welcome {width:60%; margin: 0 auto;}

Setting both the left and right margin to auto (as the above does) will center your div. If you do this without setting a width, the div will still be centered, but will fill the screen (or the previous div, at least) so you won't be able to tell.

Using position:absolute isn't a great idea here unless you need it for something else which isn't apparent in the question.

Upvotes: 0

Related Questions