摘要:方法一和元素宽高未知的情况宽高未知方法二绝对定位和自身宽度一半,自身高度的一半已知宽高宽高已知方法三布局方法四被居中的元素是或者元素和元素方法五绝对定位和定高方法六父级高度和
方法一、 CSS3 transform和position(元素宽高未知的情况)
</>复制代码
宽高未知
.box {
width: 400px;
height: 400px;
background: #ccc;
position:relative;
}
.box span {
background: red;
position: absolute;
left: 50%;
top: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
方法二、 绝对定位和margin-left:-自身宽度一半,margin-top: -自身高度的一半 (已知宽高)
</>复制代码
宽高已知
.box {
width: 400px;
height: 400px;
background: #ccc;
position: relative;
}
.box span {
display: inline-block;
width: 100px;
height: 100px;
background: red;
text-align: center;
line-height: 100px;
position: absolute;
left: 50%;
top: 50%;
color: #fff;
margin-left: -50px;
margin-top: -50px;
}
方法三、 css3 flex布局
</>复制代码
.box {
width: 400px;
height: 400px;
background: #ccc;
display:flex;
justify-content:center;
align-items: center;
}
.box .child {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
方法四、 被居中的元素是inline或者inline-block元素
</>复制代码
inline和inline-block元素
.box {
width: 400px;
height: 400px;
background: #ccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box .child {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
方法五、绝对定位和margin:auto
</>复制代码
定高
.box {
width: 400px;
height: 400px;
background: #ccc;
position: relative;
}
.box .child {
width: 100px;
height: 100px;
background: red;
text-align: center;
color: #fff;
line-height: 100px;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
方法六、line-height: 父级高度和text-align: center
</>复制代码
line-height
.box {
width: 400px;
height: 400px;
background: #ccc;
line-height: 400px;
text-align: center;
font-size: 0;
}
.box .child {
background: red;
font-size: 14px;
color: #fff;
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52993.html
摘要:方法一和元素宽高未知的情况宽高未知方法二绝对定位和自身宽度一半,自身高度的一半已知宽高宽高已知方法三布局方法四被居中的元素是或者元素和元素方法五绝对定位和定高方法六父级高度和 方法一、 CSS3 transform和position(元素宽高未知的情况) 宽高未知 .box { width: 400px; height: 400px; backgr...
摘要:先说下我面试情况,我一共面试了家公司。篇在我面试的众多公司里,只有同城的面问到相关问题,其他公司压根没问。我自己回答的是自己开发组件面临的问题。完全不用担心对方到时候打电话核对的问题。 2019的5月9号,离发工资还有1天的时候,我的领导亲切把我叫到办公室跟我说:阿郭,我们公司要倒闭了,钱是没有的啦,为了不耽误你,你赶紧出去找工作吧。听到这话,我虎躯一震,这已经是第2个月没工资了。 公...
摘要:以上是面试中笔试涉及到的知识点或者后面被问到的只是点。也许是根据薪资和面试的等级来出题的。我刚面试完回家,吃了一个泡面,回忆下面试题。同时作为传递到构造函数,执行了一次让构造函数里面的属性和方法赋值了一份给。 css 如何水平垂直居中,请尽量多说几种方法?很尴尬,我多次面试都被问到这个问题,fuck 定位(回答了)、table-cell布局、flex布局、translate+relat...
摘要:以上是面试中笔试涉及到的知识点或者后面被问到的只是点。也许是根据薪资和面试的等级来出题的。我刚面试完回家,吃了一个泡面,回忆下面试题。同时作为传递到构造函数,执行了一次让构造函数里面的属性和方法赋值了一份给。 css 如何水平垂直居中,请尽量多说几种方法?很尴尬,我多次面试都被问到这个问题,fuck 定位(回答了)、table-cell布局、flex布局、translate+relat...
阅读 1854·2021-11-24 09:39
阅读 3404·2021-11-22 15:24
阅读 3202·2021-10-26 09:51
阅读 3433·2021-10-19 11:46
阅读 2978·2019-08-30 15:44
阅读 2311·2019-08-29 15:30
阅读 2623·2019-08-29 15:05
阅读 870·2019-08-29 10:55