css左右居中(css中居中)
Css实现元素上下左右都居中的4种方法
例：居中.wrapper里的.content
一. 已经元素的宽高的前提下：
(1)? left:50%;top:50%
父元素设置相对定位，position: relative;?
子元素(要居中的元素)设置绝对定位，position: absolute;? left: 50%;? ?top: 50%
（2）设置margin: auto;
父元素设置相对定位,position: relative;
子元素(要居中的元素)设置绝对定位，position: absolute; margin: auto
(3)? ?flex布局
父元素设置 display: flex;? justify-content: center;? ?align-items: center;
二.未知元素宽高的情况下：
（1）四个方向设置值，把元素撑开
父元素设置相对定位，position: relative;?
子元素设置绝对定位，position: absolute; top与bottom设置一样的值，left与right设置一样的值，把容器撑开
【css】居中方案
前言：根据最近学习的课程，简单总结一下学习到的css左右布局以及居中方案。后期学习深入之后再回来进行css居中的完整总结。
给所有子元素添加 float: left ，给父元素加 clearfix 类，清除浮动
html:
css:
将内联元素外部的块级元素的 text-align 设置为 center ，即可实现内联元素（ inline 、 inline-block ）的水平居中。
演示
将固定宽度的块级元素的 margin-left 和 margin-right 设置为 auto ，即可实现块级元素的水平居中。
演示
将每个块级元素的 display 设置为 inline-block ，然后将它们的父容器的 text-align 设置为 center ，即可使多个块级元素水平居中。
演示
设置内联元素的行高（ line-heigt ）和内联元素的父元素的高度（ height ）相等，且内联元素的字体大小远小于行高，即可使内联元素垂直居中。
演示
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，即可实现垂直居中。
演示
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中
演示
css之DOM元素左右垂直居中
对于DOM居中大家都不陌生，几乎开发pc或者移动端多会遇到这个问题，但是css对DOM居中是有很多种方法的，下面我来总结下。
1.第一种情况是父级高度宽度不确定
2.第二种情况是父级宽度高度确定
CSS 一个DIV里面的文字如何上下左右居中显示？
这样：
body{margin:0;padding:0;width:100%;
height:100%;
}div{position:absolute;top:50%;left:50%;margin-top:-250px;?margin-left:-250px;/*此时宽和高都要固定*/width:500px;height:500px;}body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
/*此时宽和高都要固定*/
width:500px;
height:500px;
}
扩展资料：
注意事项
一、用两个值就可以了
1、text-align:center;
//这是让文字左右居中
2、line-height:100px;
//这是让文字垂直居中
vertical-align:middle;
//这个属性不能让文字垂直居中，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
二、多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。
1、父级元素高度不固定
父级高度不固定的时，高度只能通过内部文本来撑开。可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：
!--html代码--
divid="div1"
这是多行文本垂直居中，
这是多行文本垂直居中，
这是多行文本垂直居中，
这是多行文本垂直居中。
/div
/*css代码*/
#div1{
width:300px;
margin:50pxauto;
border:1pxsolidred;
text-align:center;/*设置文本水平居中*/
padding:50px20px;
}
2、父级元素高度固定
只对拥有valign特性的元素才生效，结合display:table;，可以使得div模拟table属性。因此可以设置父级div的display属性：display:table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;。