How to center a div horizontally and vertically_html/css

How to center a div horizontally and vertically_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:38:31

Original

1193 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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.