荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
程序员文章站
2022-07-06 16:38:33
文章目录三种水平居中方式及其应用情形inline元素：text-alignblock元素：margin：0 autoabsolute定位过的元素：left：50%；margin-left：负值（元素宽度的一半）四种水平垂直居中方式和应用场景inline元素：设置line-height等于height的值absolute定位过的元素：top：50%；margin-top：负值（元素宽度的一半）absolute定位过的元素：设置transform：translate（-50%，-50%）absolute定位过的...
文章目录
三种水平居中方式及其应用情形
inline元素：text-align
主要设置在行内元素父元素中
#box1 {
/* 水平居中 */
text-align: center;
}
block元素：margin：0 auto
#box2 #radiu{
height: 100px;
width: 100px;
border: 1px solid black;
border-radius: 50%;
background-color: yellow;
/* 水平居中 */
margin: auto;
}
absolute定位过的元素：left：50%；margin-left：负值（元素宽度的一半）
注意：使用这种定位必须要知道他的高度，并且别忘记父元素设置positive：reletive
#box3 #diamond{
height: 200px;
width: 200px;
border: 1px solid black;
background-color: yellowgreen;
/* 水平居中 */
position: absolute;
left: 50%;
margin-left: -100px;
/* transform: translate(-100px); */
}
综合三种情况的代码和效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
#box1{
height: 50px;
border: 1px solid black;
}
#box2{
height: 200px;
border: 1px solid black;
}
#box3{
height: 300px;
border: 1px solid black;
position: relative;
}
#box1 {
/* 水平居中 */
text-align: center;
/* height: 50px;
line-height:50px ; */
}
#box2 #radiu{
height: 100px;
width: 100px;
border: 1px solid black;
border-radius: 50%;
background-color: yellow;
/* 水平居中 */
margin: auto;
}
#box3 #diamond{
height: 200px;
width: 200px;
border: 1px solid black;
background-color: yellowgreen;
/* 水平居中 */
position: absolute;
left: 50%;
margin-left: -100px;
/* transform: translate(-100px); */
}
</style>
<body>
<div class="box" id="box1">
<span>提目</span>
</div>
<div class="box" id="box2">
<div id="radiu"></div>
</div>
<div class="box" id="box3">
<div id="diamond"></div>
</div>
</body>
</html>
四种垂直居中方式和应用场景
inline元素：设置line-height等于height的值
这种就是必须要知道元素的height值，主要设置在行内元素父元素中
#box1{
/* 水平居中 */
text-align: center;
height: 50px;
line-height:50px ;
}
absolute定位过的元素：top：50%；margin-top：负值（元素宽度的一半）
注意：使用这种定位必须要知道他的高度，并且别忘记父元素设置positive：reletive
#box3 #diamond{
height: 200px;
width: 200px;
border: 1px solid black;
background-color: yellowgreen;
/* 水平垂直居中 */
position: absolute;
left：50%;
margin-left:-100px
top: 50%;
margin-top: -100px;
}
absolute定位过的元素：设置transform：translate（-50%，-50%）
这里只用考虑到transform的兼容性问题
#box3 #diamond{
height: 200px;
width: 200px;
border: 1px solid black;
background-color: yellowgreen;
/* 水平居中 */
/* 垂直居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
absolute定位过的元素：top,left,bottom,right =0,margin:auto
这个是最优的既能保持兼容性又不用考虑他的高度宽度值
#box3 #diamond{
height: 200px;
width: 200px;
border: 1px solid black;
background-color: yellowgreen;
/* 水平居中 */
/* 垂直居中 */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: ;
}
本文地址：https://blog.csdn.net/weixin_43342105/article/details/107236347
上一篇： 讯飞录音笔开创“记录”新模式 斩获CES最佳人工智能奖
下一篇： css之弹性布局