前言
我们在编写马过程中,想必大家对水平垂直居中的方法了解并不多.所以我给大家总结式的列出几种常用的水平垂直居中的方法.
第一种方法
d第一种
.Centered1{
width: 100%;
position: relative;
}
.Centered1 p{
background-color: deeppink;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
right:0;
top: 0;
margin: auto;
第二种方法
d第二种
/*第二种方法水平垂直居中*/
background-color:red;
margin-left:-100px;
margin-top: -100px;
第三种方法
d第三种
/*第三种方法水平垂直居中*/
background-color: dimgrey;
background-color:darkorange;
第四种方法
d第四种
/*第四种方法水平垂直居中,老版本flex布局*/
-webkit-box-pack:center;
-webkit-box-align: center;
background-color:cadetblue;
第五种方法
d第五种
/*第五种方法水平垂直居中,新版本的flex水平垂直居中*/
background-color: darkslateblue;
justify-content:center;
align-items: center;
background-color:fuchsia;
vertical-align: middle;
text-align: center;水平
水平位置居中可以使用CSS属性text-align来控制text-align:center; //文本居中如果需要文字垂直位置居中解决方法一般使用设置文字的行高和父级元素高度一致的办法来做
例如
.a {
text-align:center;
文字文字文字文字
以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用，就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！