CSS样式块级元素居中的方法

来源：互联网发布：ipad套子淘宝编辑：程序博客网时间：2024/06/06 16:44

两个盒子

<div class="box">     <div class="ppp">6666</div></div>

第一种居中方式：不知道居中元素的宽高

.box{    position: relative;    height: 100%;    width: 100%;    background-color: aqua;}.ppp{    position: absolute;    left: 50%;    top: 50%;    margin: auto;    background-color: red;    transform: translate(-50%);}
第二种：position：absolute定位居中

.box{    height: 100%;    width: 100%;    background-color: aqua;}.ppp{    position: absolute;    width: 50px;    height: 50px;    left: 0;    right: 0;    top: 0;    bottom:0;    margin: auto;}
第三种：text-aligin ；vertical-aligin

.box{    text-align: center;    width: 100%;    height: 600px;    background-color: aqua;    line-height: 600px;}.ppp{    width: 50px;    height: 50px;    line-height: 50px;    text-align: center;    background-color: magenta;    display: inline-block;    vertical-align: middle;}
第四种：CSS3，display：fiex

.box{    display: flex;    background-color: aqua;    justify-content:center;    align-items: center;    width:100%;    height: 100%;}.ppp{     background-color: magenta;}

阅读全文

0 0