html css实现元素的水平居中、垂直居中的几种方法

 

html中的行内元素和块级元素有哪些。

在html中，元素主要分为行内元素和块级元素；

行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。

块级元素写完后会自动换行，有宽高可以修改。

还有一种特殊的元素叫做行内块元素。

大致分内是：

行内元素有：heda   meat   title  lable  span  br  a   style  em  b  i   strong

块级元素有：body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  cnter  div

行内块元素常见的有： img  input  td  

 

测试的html代码

 

<div class="box">
<a class="blog" href="">追求者的博客 blog.csdn.net/example440982</a>
<div class="blog2">追求者的博客 blog.csdn.net/example440982</div>
<p>追求者的博客 blog.csdn.net/example440982</p>
<img src="text.png" width="50" height="50">
</div>

 

一.水平居中 

（1）行内元素解决方案

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：

.box {
text-align: center;
}

 

（2）块状元素解决方案

.box {
width: 200px; /*要设置宽度才有效*/
margin: 0 auto;
}

 

（3）多个块状元素解决方案
将元素的display属性设置为行内元素（inline、inline-block或table-cell），并且把父元素的text-align属性设置为center即可:

.box {
text-align: center;
}

.child {
display: inline-block;
}

 

（4）多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:

.level-center {
display: flex;
justify-content: center;
}

 

二.垂直居中

（1）单行的行内元素解决方案  把line-height设置为高度同样的值，会自动垂直居中。eg：a标签垂直居中

.box {
background: #ccc;
height: 240px;
}
.box a {
line-height: 240px;
}

 

（2）多行的行内元素解决方案
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

.box {
background: #ccc;
width: 300px;
height: 300px;
display: table-cell;
/*使行内元素或table-cel元素垂直居中*/
vertical-align: middle;
}

 

（3）已知高度的块状元素解决方案

.box {
position: relative;
width: 300px;
height: 300px;
background: pink;
}
.blog2 {
position: absolute;
height: 100px;
background: #ccc;
top: 50%;
margin-top: -50px; /*设置边距为自身高度的一半*/
padding: 0;
}

（4）未知高度的块状元素解决方案

.box {
positioin: relative;
width: 300px;
height: 300px;
background: pink;
}
.blog2 {
position: absolute;
background: #ccc;
top: 50%;
transform: translateY(-50%); /*利用translate移动元素自身的位置*/
}

三.水平垂直居中

（1）已知高度和宽度的元素解决方案1
这是一种不常见的居中方法，可自适应，比方案2更智能，如下：

.blog2 {
position: absolute;
width: 300px;
height: 200px;
background: #ccc;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

 

（2）已知高度和宽度的元素解决方案2

.blog2 {
position: absolute;
width: 300px;
height: 200px;
background: #ccc;
top: 50%;
left: 50%;
margin-top: -100px; /*盒子自身高度的一半*/
margin-left: -150px; /*盒子自身宽度的一半*/
}

 

（3）未知高度和宽度元素解决方案

.blog2 {
position: absolute;
/* width: 300px;
height: 200px; */
background: #ccc;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

 

（4）使用flex布局实现

.box {
display: flex;
justify-content: center;
align-items: center;
background: #ccc;
height: 200px;
}