HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

万次阅读 多人点赞 2017-08-11 18:25:02

最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。水平居中直接加上&lt;center&gt;标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...

最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。
 水平居中直接加上<center>标签即可，或者设置margin:auto;当然也可以用下面的方法 
下面说两种在屏幕正中（水平居中+垂直居中）的方法
 放上示范的html代码： 
<body>
	<div class="main">
		<h1>MAIN</h1>
	</div>
</body>
 
方法一： 
div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。 
.main{
	text-align: center; /*让div内部文字居中*/
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
 
效果如图：
  
方法二：
 仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。 
 .main{
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
 
方法三：
 对于水平居中，可以使用最简单的<center>标签，不过已经过时了，用法如下： 
<p><center>123</center></p>
 
这个<center>标签就是相对于<p>标签里的文字，可以使其居中。 
由于center标签已经过时了，所以正规一点的话还是不建议使用的，可以使用如下的方式代替： 
<p style="text-align:center;">123</p>
 

 
 

 欢迎大家加入QQ群一起交流讨论，
 「吟游」程序人生——YinyouPoet

收起

展开全文

html css

Word 2016 撰写论文(1): 公式居中、编号右对齐

万次阅读 多人点赞 2018-08-15 18:59:56

写论文时，要求公式居中，编号右对齐。刚开始碰到这种问题，很麻烦，网上看了好多方法，目前，两种方法比较实用。第一种是表格法，方便快捷；第二种是制表位法，刚开始设置比较繁琐，一旦设置好了，比表格法速度还要...

写论文时，要求公式居中，编号右对齐。刚开始碰到这种问题，很麻烦，网上看了好多方法，目前，两种方法比较实用。第一种是表格法，方便快捷；第二种是制表位法，刚开始设置比较繁琐，一旦设置好了，比表格法速度还要快。个人推荐制表位法，当然，这样看自己的习惯了。下面将依次介绍两种方法实现公式居中，编号右对齐。

方法1：表格法

1、插入一行三列的表格，在表格中依次插入公式，序号；

2、接下来，设置公式居中，编号右对齐。将光标定位到公式处的单元格 ——> 段落选项卡选择居中的图标；

再选中表格中编号处单元格 ——> 段落卡选择右对齐的图标。设置完成后，公式居中，编号右对齐了，接下来将表格的框线去除就可以了。

3、选中整个表格——>段落选项卡找到边框的图标 ——> 选择“无框线”。

这样，就设置完毕了，其他的基本设置，自己慢慢探索吧。

方法2：制表位法

插入制表位的思想是用两个制表位将一行分为三个部分，关键在于两个制表位参数的设置。这也是制表位中较为繁琐的，不同期刊要求的页面的页边距不同，所设置的也不同。

1、熟悉制表位

光标在任意位置 ——> 右击选择“段落” ——> 选择“制表位” ——> 看到对齐方式：“居中”，“右对齐”

2、熟悉自己页面纸张大小和页边距，一般论文都是用默认的A4纸，A4纸大小为 21cm×29.7cm。页边距默认为：上下左右分别为：2.54cm，2.54cm，3.18,cm，3.18cm。下面将以这些参数设置制表符，这些参数一定要知道，也是制位表的关键。

3、熟悉了制位表，纸张大小和页边距，下面就要正式进入主题了。

（1）第一个制表位：设置在页面中间，计算公式为：(21cm-3.18cm×2)÷2=7.32 cm ;

（2）第二个制表位：设置在页面右侧，计算公式为：21cm-3.18cm=17.82 cm ;

看到这，是不是很懵，默默地拿起笔，在纸上算，什么鬼，居然还有计算公式？为了更直观理解，可以参考下图。

（3）设置第一个制表位，在光标处右击“段落” ——> “制表位” ——> “制表位位置” 输入：7.32厘米 ——> “对齐方式” 选择“居中” ——> 确定；

（4）设置第二个制表位

在光标处右击“段落” ——> “制表位” ——> “制表位位置”输入：17.82厘米 ——> “对齐方式”选择“右对齐”——>确定；

（5）设置好制表位后，在原先的光标处输入公式和编号，此时公式和编号处于居中，将光标放到公式前面，按“<——Backspace” 键，使其左对齐；

（6）光标放在公式前，按“Tab”键；此时，公式和编号居中。

接着光标定位到公式后和编号中间，同样按“Tab”键，此时公式居中，编号右对齐。

至此，制位表法设置完毕。假如每个公式都是这样设置，太麻烦，刚才是针对某一个公式设置。实际，在写论文，有很多公式，此时需要借助“样式”，来帮助我们完成批量设置。

新建“样式”批量设置

（1）第一步，新建公式的样式。

选择“样式选项卡”右下角小箭头，选择“新建样式”；

设置名称为：公式

后续段落样式为：正文

选择 ——> 格式 ——> 制表位，与之前设置制表位样，分别设置第一个制表位 7.32厘米 和第二个制表位 17.82厘米。

（2）设置好后，“样式选项卡”多出一个“公式”样式，此时在文档的任意位置输入公式和编号，注意，此时公式和编号的样式属于“正文”，光标定位到公式那一行，选择样式“公式”；

（3）与之前的步骤相同，将光标分别放到公式前面，按“<——Backspace”键，使其左对齐。

分别将光标放在公式前，按“Tab”键；此时，公式和编号居中。

接着将光标定位到公式后和编号中间，同样按“Tab”键，此时公式居中，编号右对齐。

以上，对论文中，公式居中、编号右对齐的就设置完毕了。个人推荐制位表法，尤其是，有很多公式的时候，设置一个样式就OK了。其实，在编号一般要自动设置，这样在论文修改时，删除某一个公式，编号会自动变化。如果没有设置自动编号，那样，费时间，牵一发而动全身。自动编号有很多种方法，一种是：在Word 2016 设置“插入题注”。另一种是MathType公式编辑器中设置，插入编号。当然，我推荐，使用Word 2016 设置“插入题注”，简单方便。关于插入题注和交叉引用方法，可以参考另一个博文：Word 2016 撰写论文：交叉引用，公式自动设置编号可以借鉴。

注：本博客于2019年5月6日 19：48更新：将3.17改为3.18。

若有更好的方法欢迎到评论区留言，一起学习，共同进步。

关于 Word 撰写论文其他的注意及使用技巧可参见我的其他博文：

[1] Word 2016 撰写论文(2): 交叉引用

[2] Word 2016 撰写论文(3): 文献中常见的表格（三线表）制作

[3] Word 2016 撰写论文(4): 批量修改MathType公式字体大小

[4] Word 2016 撰写论文(5): MathType 矩阵中的每个元素居中对齐

[5] Word 2016 撰写论文(6): 取消/撤销自动编号

[6] Word 2016 撰写论文(7): 毕业论文中引用多篇参考文献

还有关于 LaTex 论文排版相关内容：

[1] LaTex 论文排版(1): Win10 下 LaTex所需软件安装 (Tex live 2018 + Tex studio)

[2] LaTex 论文排版(2): 插入公式 (从MathType公式编辑器导入到LaTex中)

[3] LaTex 论文排版(3): 插入参考文献

[4] LaTex 论文排版(4): 插入图片(Visio图转换成.eps图)

参考资料

[1] https://jingyan.baidu.com/article/948f592421b812d80ef5f971.html

[2] https://zhidao.baidu.com/question/2207504816335761148.html

[3] http://blog.sina.com.cn/s/blog_16c899fde0102wzgc.html

如果觉得内容还不错的话，欢迎点赞、转发、收藏，还可以关注微信公众号、CSDN博客、知乎。

1. 微信公众号:

2. CSDN博客：https://xiongyiming.blog.csdn.net/

3. 知乎：https://www.zhihu.com/people/xiongyiming

收起

展开全文

Word

CSS水平居中+垂直居中+水平/垂直居中的方法总结

万次阅读 多人点赞 2018-09-02 19:28:12

水平居中行内元素块级元素方案一：(分宽度定不定两种情况) 方案二：使用定位属性方案三：使用flexbox布局实现（宽度定不定都可以）垂直居中单行的行内元素多行的行内元素块级元素水平垂直...

  
目录 
水平居中  
行内元素 
 块级元素 
方案一：(分宽度定不定两种情况) 
方案二：使用定位属性 
方案三：使用flexbox布局实现（宽度定不定都可以） 
垂直居中 
单行的行内元素 
多行的行内元素 
 块级元素 
水平垂直居中 
已知高度和宽度的元素 
未知高度和宽度的元素 
方案一：使用定位属性 
方案二：使用flex布局实现 

水平居中  
 行内元素
 
首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;  
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>

<div id="father">
    <span id="son">我是行内元素</span>
</div> 
如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center; 
<style>
    #father {
        display: block;
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>

<span id="father">
    <span id="son">我是行内元素</span>
</span> 
效果： 
 

  块级元素
 
方案一：(分宽度定不定两种情况) 
定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中） 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果： 
 
 不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;  
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }

    #son {
        background-color: green;
        display: inline;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果：（将#son转换成行内元素，内容的高度撑起了#son的高度，设置高度无用） 
 

方案二：使用定位属性 
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中； 
定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%); 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
不定宽度：利用css3新增属性transform: translateX(-50%); 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果： 
 

方案三：使用flexbox布局实现（宽度定不定都可以） 
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center; 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
    }

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果：  
 

垂直居中 
 单行的行内元素
 
只需要设置单行行内元素的"行高等于盒子的高"即可； 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }

    #son {
        background-color: green;
        height: 300px;
    }
</style>

<div id="father">
    <span id="son">我是单行的行内元素</span>
</div> 
效果： 
 
  

 多行的行内元素
 
使用给父元素设置display:table-cell;和vertical-align: middle;属即可； 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }

    #son {
        background-color: green;
    }
</style>

<div id="father">
    <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div> 
效果： 
 

  块级元素
 
方案一：使用定位 
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中； 
定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%); 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
不定高度：利用css3新增属性transform: translateY(-50%); 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果： 
 

方案二：使用flexbox布局实现（高度定不定都可以） 
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center; 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果：  
 

水平垂直居中 
 已知高度和宽度的元素
 
方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto; 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果： 
 

方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px; 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果： 
 

 未知高度和宽度的元素
 
方案一：使用定位属性 
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果： 
 

方案二：使用flex布局实现 
设置父元素为flex定位，justify-content: center; align-items: center; 
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
}

    #son {
        background-color: green;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div> 
效果：

收起

展开全文

html中table居中和表格内容居中的问题

万次阅读 多人点赞 2016-09-20 10:25:01

在表格td中，有两个属性控制居中显示 align——表示左右居中——left，center，right valign——控制上下居中——left，center，right 这两个属性综合使用，就可以让单元格的内容上下左右都居中显示。 ...

关于表格中的内容：： 
  
  
  
在表格td中，有两个属性控制居中显示 

align——表示左右居中——left，center，right

valign——控制上下居中——left，center，right

 
这两个属性综合使用，就可以让单元格的内容上下左右都居中显示。 
  
但是有的时候吧，会失效，那么在td中设置text-align为center也可。 

   
td {

    text-align:center;

}

 
关于表格居中： 
  
 
  
  有时候在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto比如： 
  <div style="text-align:center">
                   
                        <table border="1" cellpadding="3" cellspacing="0" style="width: 60%;margin:auto">
                            <tr><td></td>                                                                                  </tr>
                            <tr>

</table></div>

收起

展开全文

文本图片垂直水平居中显示
vertical-align:middle;
收起
css
HTML 水平居中垂直居中垂直水平居中的几种实现方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...
收起
javascript
让div在屏幕中居中（水平居中+垂直居中）的几种方法
万次阅读 多人点赞 2019-05-21 10:07:26
【让div在屏幕中居中（水平居中+垂直居中）的几种方法】水平居中方法: 1.inline，inline-block元素的水平居中，在父级块级元素中设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin：0 auto...
收起
实现div里的img图片水平垂直居中
万次阅读 多人点赞 2017-03-31 09:53:09
body结构<body> <div> <...将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。<style type="text/css"> *{
收起
css
元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)
2020-09-25 08:30:59
元素及文本的居中包括(层的横向居中/层的垂直居中/绝对居中)以及文本挣开div的题，也在这里给予了解决方法，感兴趣的朋友可以了解下啊，希望本文可以帮助到你
收起
DIV居中及DIV垂直居中.html
2019-05-16 16:36:19
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
收起
div居中之css水平居中单行多行文本垂直居中
千次阅读 2017-09-07 09:00:21
div居中之css水平居中单行多行文本垂直居中
收起
css
CSS布局对齐方式--水平居中、垂直居中、水平垂直居中
万次阅读 多人点赞 2018-07-04 11:09:39
前言：在网页布局中，经常遇到需要使元素居中对齐的时候，居中对齐的方式有：水平居中、垂直居中和水平垂直居中。这次，借此回顾总结一下，并在此记录下相关内容。一、水平居中：（1）行内元素的水平居中 ...
收起
CSS布局
CSS将div居中
margin:0 auto;
收起
css
div垂直居中-CSS元素垂直居中方法的探究
千人学习 2018-10-29 22:17:50
针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。
收起
安卓的RadioButton居中的问题（已解决）
万次阅读 2020-08-04 21:51:26
解决安卓的RadioButton无法居中的问题。
收起
android
css中position:fixed实现div居中上下左右居中
2020-09-25 01:38:12
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
收起
Bootstrap弹出框水平居中，垂直居中
2016-09-21 00:44:52
Bootstrap弹出框水平居中，垂直居中
收起
文字居中input文字垂直居中
千次阅读 2019-04-23 09:21:31
做移动端都会遇到文字垂直居中的问题，特别是有些手机真的很难调整，然后就是必须要文字居中，那就说说几种文字垂直居中的问题吧。普通的元素例如div 1.这种居中，利用padding上下值来居中。 2.知道高度用line-...
收起
如何实现按钮水平居中
万次阅读 多人点赞 2018-06-07 18:26:53
button是一个行内块级元素display:inline-block; 所以处理方式很简单，可以用以下两种方式：方式一： ...按钮居中</button> </div> 方式二： <div> ...
收起
使用bootstrap的H5页面登录框自适应水平居中、垂直居中
2019-07-18 15:07:48
由于H5页面在使用bootstrap的自适应导致从高度上总是自动排列，导致登录框不能自动居中。项目中发现一个动态居中办法，很好用，可以让Bootstrap登录框自适应水平居中、垂直居中。
收起
CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）
万次阅读 2018-06-14 15:24:06
CSS3/CSS中居中解析今天，博主带来的是CSS3/CSS中的居中解析，相信小伙伴们有时候也会被各种居中搞的一脸懵逼把！居中总体来说可以分为水平居中还有垂直居中，顾名思义，定义这里就不解释了！首先，我们来看下垂直...
收起
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
万次阅读 多人点赞 2013-09-11 21:06:11
我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left...
收起
DreamWeaver文字怎么居中对齐? dw垂直居中对齐的技巧
2020-09-24 09:59:54
DreamWeaver文字怎么居中对齐？DreamWeaver中输入的文字想要实现居中对齐，该怎么居中呢？下面我们就来看看dw垂直居中对齐的技巧，需要的朋友可以参考下
收起

HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

Word 2016 撰写论文(1): 公式居中、编号右对齐

方法1：表格法

方法2：制表位法

新建“样式”批量设置

参考资料

CSS水平居中+垂直居中+水平/垂直居中的方法总结

水平居中

行内元素

块级元素

方案一：(分宽度定不定两种情况)

方案二：使用定位属性

方案三：使用flexbox布局实现（宽度定不定都可以）

垂直居中

单行的行内元素

多行的行内元素

块级元素

方案一：使用定位

方案二：使用flexbox布局实现（高度定不定都可以）

水平垂直居中

已知高度和宽度的元素

未知高度和宽度的元素

方案一：使用定位属性

方案二：使用flex布局实现

html中table居中和表格内容居中的问题

文本图片垂直水平居中显示

HTML 水平居中 垂直居中 垂直水平居中的几种实现方式

让div在屏幕中居中（水平居中+垂直居中）的几种方法

实现div里的img图片水平垂直居中

元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)

DIV居中及DIV垂直居中.html

div居中之css水平居中 单行多行文本垂直居中

CSS布局对齐方式--水平居中、垂直居中、水平垂直居中

CSS将div居中

div垂直居中-CSS元素垂直居中方法的探究

安卓的RadioButton居中的问题（已解决）

css中position:fixed实现div居中上下左右居中

Bootstrap弹出框水平居中，垂直居中

文字居中input文字垂直居中

如何实现按钮水平居中

使用bootstrap的H5页面登录框自适应水平居中、垂直居中

CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

DreamWeaver文字怎么居中对齐? dw垂直居中对齐的技巧

居中

HTML 水平居中垂直居中垂直水平居中的几种实现方式

div居中之css水平居中单行多行文本垂直居中