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, 2022 in CSS by Edureka
• 13,620 points
1,255 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, 2022 by Tanishqa
• 1,170 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, 2022 in CSS by Edureka
• 12,690 points
570 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, 2022 in CSS by Edureka
• 13,620 points
1,175 views
0 votes
0 answers

Table scroll with HTML and CSS

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

Jul 8, 2022 in CSS by Edureka
• 13,620 points
1,622 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, 2022 in CSS by Edureka
• 13,620 points
240 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, 2022 in Others by Kichu
• 19,050 points
2,825 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, 2022 in Others by narikkadan
• 63,720 points
2,382 views
0 votes
1 answer

Switching H1 text with a logo image

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

answered Feb 27, 2022 in Others by narikkadan
• 63,720 points
647 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, 2022 in Digital Marketing by narikkadan
• 63,720 points
2,321 views
0 votes
1 answer

CSS calc width and height values

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

answered Aug 4, 2022 in CSS by Tanishqa
• 1,170 points
6,102 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, 2022 in CSS by Tanishqa
• 1,170 points
6,066 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP