1.关于css居中的几种方式
2021-06-19 00:09
标签：tran 常用 容器 play ora contain blog margin 先来 刚开始的时候看到垂直居中就有点头大，现在写出来为后来的同学头不要再大 首先来看一下dom结构，一般是俩个容器， 第一种方式 也是很常用的一种方式 贴css代码 这相信很多人多会通过定位的方式是元素偏移 第二种方式 DOM结构同上 和前一种方式原理差不多只是使用transform代替了margin 第三种方式 使用calc（）也能实现 第四种方式 使用flex布局 借鉴了之前的container的css dom结构也没有什么区别 css 基本上效果图都是一样如下 1.关于css居中的几种方式 标签：tran 常用 容器 play ora contain blog margin 先来 原文地址：http://www.cnblogs.com/famLiu/p/7196098.html.container{
width: 400px;
height: 400px;
margin: 0 auto;
background: lightcoral;
position: relative;
margin-top: 10px;
}
.container>.t1{
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border: 1px solid white;
}
.container>.t2{
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid white;
}
.container>.t4{
position: absolute;
width: 200px;
height: 200px;
top: calc(50% - 100px);
/*top: -webkit-calc(50% - 100px);*/
left: calc(50% - 100px);
/*left: -webkit-calc(50% - 100px);*/
border: 1px solid white;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
.flex>.t3{
height: 200px;
width: 200px;
border: 1px solid white;
}
