css样式居中显示,css样式div居中
css样式中怎么能让一行字水平居中显示
需要准备的材料分别有：电脑、浏览器、html编辑器。
目前创新互联已为数千家的企业提供了网站建设、域名、网站空间、网站托管、服务器租用、企业网站设计、门头沟网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的style标签中，输入css代码：p {text-align: center}。
3、浏览器运行index.html页面，此时p标签内的文字成功被水平居中显示。
CSS水平居中的9种方法
容器的居中显示在网页设计中是很常见的，居中显示可以获得视觉的焦点，是内容更加突出，下面就简单的说明一下如何在HTML中通过样式的控制来实现
01
最常见的一种，代码示例如下图，首先，取big一半像素大小赋给small层，通过margin: 0 auto; text-align: center来实现
02
第二种方法，代码示例如下图，将big层的display设置为table-cell,然后small层的margin-left取（500-250）/2，也就是125即可
03
第三种方法，代码示例如下图，将big层的position设置为absolute，然后small层的margin-left取（500-250）/2，也就是125即可
04
第四种方法，通过display:flex实现，代码示例如下图，big层display:flex;flex-direction:column;而small层align-self:center
05
第五种方法，在small层的宽度没有的时候，可以通过width:fit-content这个设置来完成，代码示例如下
06
第六种方法，通过display:inline-block来实现，将这个设置赋给big层即可，代码示例如下图
07
第七种方法，设置big层position:relative，相对情况下，使small层左浮动，代码示例如下
08
第八种方法，transform属性，代码示例如下
09
第九种方法，借助第三方样式，比如增加一个add节点，水平浮动向左，使small层随之浮动，代码示例如下
特别提示
每种方法都适应不同的运行环境，实际操作时需要考虑不同浏览器的解析时的兼容性
css怎么设置居中
水平居中
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
若是块级元素, 该元素设置 margin:0 auto即可.
若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
.parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;}
使用flex 布局, 可以轻松的实现水平居中, 子元素设置如下:
.son{
display: flex;
justify-content: center;}
使用CSS3中新增的transform属性, 子元素设置如下:
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);}
使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:
.son{
position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;}
使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:
.son{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;}
垂直居中
若元素是单行文本, 则可设置 line-height 等于父元素高度
若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.
.parent::after, .son{
display:inline-block;
vertical-align:middle;}.parent::after{
content:'';
height:100%;}
元素高度不定
可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
用 Flex 布局
.parent {
display: flex;
align-items: center;}
可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:
.son{
position:absolute;
top:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);}
元素高度固定
设置父元素相对定位(position:relative), 子元素如下css样式:
.son{
position:absolute;
top:50%;
height:固定;
margin-top:-0.5高度;}
设置父元素相对定位(position:relative), 子元素如下css样式:
.son{
position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;}
分享文章：css样式居中显示,css样式div居中
URL链接：http://scjbc.cn/article/dsgppeg.html
