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
• 9,940 points
17 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
29 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
• 9,940 points
9 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
• 9,940 points
18 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
• 9,940 points
8 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,034 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
• 11,280 points
77 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
• 11,280 points
209 views
0 votes
0 answers

H2 comes before h1 in source, Is it ok?

IF i use <h2> for left sidebar ...READ MORE

Mar 11 in Digital Marketing by Kichu
• 19,040 points
113 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
16 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
10 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