CSS水平居中和垂直居中的几种方法

水平居中

元素和内容

1. 元素
   从开始标签到结束标签之间的所有代码，包括了开始标签和结束标签。
2. 内容
   从开始标签到结束标签之间的文本、图像等内容。

内容水平居中

1. 设置align属性

<div align="center">
      通过设置属性align="center" 居中的内容
</div>

2. 设置样式text-align

<div  style="text-align:center">
      通过样式style="text-align:center" 居中的内容
</div>

元素水平居中

1.div的水平居中，设置宽度，使用外边距左右自动获取的方式

<div style="width:300px;margin:0 auto">
  设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中
</div>

PS：外边距margin的说明
外边距和内边距一样，取值都是按照顺时针方向取值的，当值有四个的时候，分别对应上、右、下、左。当只有两个值的时候，前两个代表的是上下的边距，后两个代表的是左右的边距。

2. span的水平居中
   span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中。可以将span放置在一个div中，通过设置text-align:center实现居中

<div style="text-align:center">
  <span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>

垂直居中

1. 单行文本居中
   通过设置子元素的line-height值等于父元素的line-height值实现单行文本居中的效果。
   
2. 设置相同的上下内边距
   通过给父元素设置相同的上下内边距即可实现

<div style="padding: 10px 0;border: #2a6496 solid 1px">
     <div>
         Hello world
    </div>
</div>

CSS水平居中和垂直居中的几种方法

原文：https://www.cnblogs.com/newobject1024/p/14059656.html