CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题

元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例。

首先请先明白块级元素和行级元素的区别

块级元素

块级元素水平居中

1:margin: 0 auto

element {
margin: 0 auto;
}

2:负边距+绝对定位

.outside {
width:500px;
height:200px;
background-color: red;
margin:100px auto;
position: relative;
}
.inner {
width: 100px;
height:50px;
background-color: yellow;
position: absolute; // 绝对定位
left:50%; // +
margin-left: -50px; // 负边距
}

3: 弹性盒子flexbox:

.outside {
width:500px;
height:200px;
background-color: red;
margin:100px auto;
position: relative;
display: flex; // 父元素display:flex;
justify-content: center; // 主轴上居中对齐
}
.inner {
background-color: yellow;
height:100px;
width: 50px;
}

块级元素垂直居中(元素高度已知):

1: 利用负边距+绝对定位

  .outside {
width:720px;
height: 720px;
margin: 0 auto ;
position: relative; /*祖先元素的非static定位*/
}
.inner {
width: 350px;
height: 350px;
position: absolute;
top: 50%; /*元素相对其最近的position属性不为static的元素(祖先元素)移动50%,toprightbottom 和 left 属性指定定位元素的位置。*/
margin-top: -175px; /*元素向上移动自身的50%,此时,正好垂直居中*/
}

2. 弹性盒子flexbox:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.outside {
width:300px;
height: 200px;
margin:100px auto;
background-color: red;
display: flex; // 弹性盒子
align-items: center; // 弹性盒子
}
.inner {
width:50px;
height: 30px;
background-color: yellow;
}
</style>
</head>
<body >
<div class="outside">
<div class="inner">
inner
</div>
</div>
</body>
</html>

3. 绝对定位+父元素position非static+子元素transform

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.outside {
width:300px;
height: 200px;
margin:100px auto;
background-color: red;
position: relative; // 父元素非static
}
.inner {
width:50px;
height: 30px;
background-color: yellow;
position: absolute;
top:50%;
transform: translateY(-50%); // 相对于自身高度,向上移动50%
}
</style>
</head>
<body >
<div class="outside">
<div class="inner">
inner
</div>
</div>
</body>
</html>

块级元素垂直居中(元素高度未知):

1. position:absolute + transform属性

利用transform的translate()或translateY()方法

 <!--Html 代码-->
<div class="outside">
<div class="inner">
</div>
</div>
  /*Css 代码*/
.outside {
background-color: #5555ee;
width:720px;
height: 720px;
margin: 0 auto ;
position:relative; }
.inner {
width: 350px;
height: 350px;
background-color: #ee5555;
position: absolute;
top:50%;/*相对祖先元素向下移动50%*/
transform: translateY(-50%);/*元素y轴移动自身的一半*/
transform: translate(,-50%);/*元素y轴移动自身的一半,与上一行效果相同*/
}

2 position:absolute + margin-top:auto + margin-bottom:auto

利用上边距,下边距在垂直方向的auto

<head>
<style type="text/css">
.outside {
width: 300px;
height: 300px;
background-color: red;
margin: 60px auto;
position: relative;
}
.inside {
width: 150px;
height: 150px;
background-color: black;
position: absolute; 首先是父元素与子元素的position属性值要“配套”好,这样子元素的top,bottom才可以发挥应有的作用
top:30px;
bottom:30px; 当垂直方向上的margin为auto时,不论是margin-left,margin-right,还是margin:auto, auto总是会试图充满整个父元素,
margin: auto 4px; 30px,30px,auto的“配合”是此方法有效果的关键所在。子元素被要求拉伸到top:30px;bottom:30px;(两个值必须一样,这样才居中),但因为高度被固定而做不到这一点,所以margin:auto;就让它居中了。
}
</style>
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>

3 flexbox弹性盒子

<!--Html 代码-->
<div class="outside">
<div class="inner">
</div>
</div>

3.1 设置direction:row或是direction:columns

.outside {
display: flex;
flex-direction: column;
/*主轴方向设为垂直方向*/
justify-content: center;
/*主轴方向上的元素的对齐方式*/
}
.outside {
display: flex;
flex-direction: row;
/*默认主轴方向就是row*/
align-items: center;
/*交叉轴上的元素的对齐方式*/
}

3.2 目前来说最简单的方法:

.outside {
display: flex;
} .inner {
margin: auto;

二 行级元素

水平居中:

    {
text-align:
}

垂直居中:

上一篇:Android静态注册广播无法接收的问题(8.0+版本)


下一篇:Android -------- kotlin插件神器Json直接生成javaBean