关于html中 居中 问题小结

一个DIV在body内居中 适用于登录界面登录小窗口

方法一:

给DIV如下属性:

width:500px;

height:300px;

background:#ccc;

position:absolute;

left:50%;

top:50%;

margin-left:-250px;

margin-top:-150px;

一个DIV在另一个div中垂直居中

方法一:

CSS3中的玩意 这要将这几句加到父div中子DIV就水平垂直居中

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

方法二

.parent {

          width:800px;

          height:500px;

          border:2px solid #000;

          position:relative;

}

 .child {

            width:200px;

            height:200px;

            margin: auto;  

            position: absolute;  

            top: 0; left: 0; bottom: 0; right: 0; 

            background-color: red;

}

方法三

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:table-cell;

            vertical-align:middle;

            text-align: center;

        }

        .child {

            width:200px;

            height:200px;

            display:inline-block;

            background-color: red;

        }

方法四

.test{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

图片和a标签水平上居中的解决办法

html img a标签依次放置

CSS

img{

display:inline-block;

vertical-align:middle;

}

a{

vertical-align:middle;

}

以上文档均来自网上资源 亲测有效。