CSS实现垂直水平居中

Posted 2020-07-03 熊大大大大大大大大

html结构：

<div class="wrapper">
    <div class="content"></div>
 </div>

CSS代码：

 .wrapper{
            position:relative;
            height:400px;
            width:100%;
            background-color: antiquewhite;
        }
        .content{
            background-color:#6699FF;
            width:200px;
            height:200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top:-100px ;
            margin-left: -100px;/*不添加下面两行的话，只能实现元素左上角在垂直水平中心点上；另外，这个值是内容块的高度和宽度的一半*/
        }