css文本居中的几种方式

为什么80%的码农都做不了架构师？>>>   

行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素

一、左右居中

1.行内元素：

常用的inline元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

（1）给父元素设置

text-align:center 

2.块状元素：

常用的块状元素有，

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

    （1）定宽块状元素（width值或百分比已经固定的元素）

        ①通过设置“左右margin”值为“auto”来实现居中的。

width:200px;margin:20px auto;

    （2）不定宽元素（width值且百分比没有固定）

①加入 table 标签

②设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

③设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

二、垂直居中

1.父元素高度确定的单行文本：

 height:100px;line-height:100px;

2.父元素高度确定的多行文本：

（1）通过table属性设置（tr、td、etc）

vertical-align：middle

（2）或者

display:table-cell;

 

转载于:https://my.oschina.net/lafter/blog/1546717