Vertical and horizontal align middle and center with CSS

0 votes

I'm not sure which method or methods to utilize to make my div element center the page (both vertically and horizontally) for cross-browser compatibility.

Aug 2 in CSS by Edureka
• 11,040 points
60 views

1 answer to this question.

0 votes

There are many methods :

  1. Center horizontal and vertical-align of an element with a fixed measure

CSS

 <div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div> 

2 . Center horizontally and vertically a single line of text

CSS

<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>  

3 . Center horizontal and vertical-align of an element with no specific measure

CSS

<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div> 
answered Aug 3 by Tanishqa
• 700 points

Related Questions In CSS

0 votes
1 answer

when declaring css styles, what is the meaning of .classA.classB (two class names with a dot in the middle and no space)

The first example (space-separated classes) is a ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
46 views
0 votes
0 answers

How can I create a round arrow with only HTML and CSS?

Using CSS and HTML, I'm attempting to ...READ MORE

Jul 8 in CSS by Edureka
• 11,040 points
42 views
0 votes
0 answers

Table scroll with HTML and CSS

I have a table like that which ...READ MORE

Jul 8 in CSS by Edureka
• 11,040 points
204 views
0 votes
0 answers

horizontal line and right way to code it in html, css

I need to draw a horizontal line ...READ MORE

Jul 22 in CSS by Edureka
• 11,040 points
20 views
0 votes
0 answers

Replacing H1 text with a logo image: best method for SEO and accessibility?

i want to link my logo to ...READ MORE

Feb 14 in Others by Kichu
• 19,040 points
1,409 views
0 votes
1 answer

Replacing H1 text with a logo image: best method for SEO and accessibility?

<h1> <a href="http://stackoverflow.com"> ...READ MORE

answered Feb 21 in Others by narikkadan
• 18,080 points
198 views
0 votes
1 answer

Switching H1 text with a logo image

<h1> <a href="http://stackoverflow.com"> ...READ MORE

answered Feb 27 in Others by narikkadan
• 18,080 points
289 views
0 votes
1 answer

H2 comes before h1 in source, Is it ok?

Semantically, H1 should come before H2 in ...READ MORE

answered Mar 12 in Digital Marketing by narikkadan
• 18,080 points
188 views
0 votes
1 answer

CSS calc width and height values

Yes, there are CSS variables named vh ...READ MORE

answered Aug 4 in CSS by Tanishqa
• 700 points
47 views
0 votes
1 answer

HTML and CSS: What do the <ul> and <li> tags stand for?

The term ul stands for unordered list. ...READ MORE

answered Aug 4 in CSS by Tanishqa
• 700 points
36 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP