Home > Article > Web Front-end > How to center a div horizontally and vertically_html/css_WEB-ITnose
How to center a div horizontally and vertically_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:311194browse
How to center a div horizontally and vertically
@(css)[Miaotong]
Introduction
We often encounter the need to center a div The content is centered horizontally and vertically. So, here is a method to center the div horizontally and vertically.
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style> *{ margin:0; padding:0; } div.box{ background-color:pink; border:2px solid #000; width:960px; height:500px; margin-left:50px; } </style></head><body> <div class="box"> <img src="girl.jpg" alt="美女"> </div> </body></html> Rendering:
Now let the image be horizontally centered in the div
We can first put a layer of boxes on the image .
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } div.container{ background-color:pink; border:2px solid #000; width:500px; height:500px; margin:50px auto; display:table; } div.wrapper{ text-align:center; display:table-cell; vertical-align:middle; } div.wrapper img{ border:1px solid #ddd; } </style></head><body> <div class="container"> <div class="wrapper"> <img src="girl.jpg" alt="美女"/> </div> </div> </body></html> IE8/Firefox/Chrome/Safari/Opera page effect:
IE6/IE7 page effect:
It can be seen that to be compatible with IE6/IE7:
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } div.container{ background-color:pink; border:2px solid #000; width:500px; height:500px; margin:0 auto; display:table; margin-top:20px; } div.wrapper{ text-align:center; display:table-cell; vertical-align:middle; } div.wrapper img{ border:1px solid #ddd; } </style> <!--[if lte IE 7]> <style type="text/css"> div.container{ position:relative; } div.wrapper{ position:absolute; left:50%;top:50%; } div.wrapper img{ position:relative; left:-50%;top:-50%; } </style> <![endif]--></head><body> <div class="container"> <div class="wrapper"> <img src="girl.jpg" alt="美女"/> </div> </div> </body></html> IE6/IE7 rendering:
To sum up, to center the content in the div horizontally, you can use text-align:center;
To achieve vertical centering, the container's display:table; and the wrapper's display:table-cell; at the same time vertical- align:middle; can center the image in the div horizontally and vertically.
If there are multiple pictures, to achieve centering:
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style> *{ margin:0; padding:0; } div.container{ background-color:pink; border:2px solid #000; width:700px; height:500px; margin:0 auto; margin-top:50px; } div.wrapper{ text-align:center; margin-top:28px; } div.wrapper img{ border:1px solid #ddd; width:200px; margin:10px; } </style></head><body> <div class="container"> <div class="wrapper"> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> </div> </div> </body></html> IE6/IE7/IE8/Firefox/Chrome/Safari/Opera page effect:
text-align:center; in div.wrapper achieves horizontal centering, margin-top:28px; achieves vertical centering.
28px=[500-(200 1 1 10 10)*2]/2, that is, the height of the outer layer minus the height of the inner layer, then divide by 2, set margin-top, and it will be centered.
If there are any mistakes or suggestions, please correct them! -----Miaotong.