一、左右居中

1.行内元素：

常用的inline元素有：

（1）给父元素设置

text-align:center

2.块状元素：

常用的块状元素有，

（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

css文本居中的几种方式相关推荐

css 实现居中的五种方式
一 .文字居中 1 固定容器高度的单行文本垂直居中:height=line-height 2 未知容器高度的文本垂直居中:设定padding,使上下的padding值相同即可 ...
CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...
关于css垂直水平居中的几种方式
关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简 ...
图文对齐居中的几种方式
总结图文居中的几种方式 1.方法一 css #target{ width: 150px; border:1px purple solid; line-height: 40px; text-indent ...
详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
java 复制文本内容_基于java文本复制的7种方式总结
如下所示: package copy; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ...
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...

css文本居中的几种方式