css竖直水平排列方法

文字：

  text-align: center;

  line-height: 200px;

 

给父元素加padding和text-align: center;

 

给子元素添加margin给父元素添加text-align: center;

 

给子或者父元素设置margin和padding

 

 

盒子：

给子或者父元素设置margin和padding

利用弹性盒子

display: flex;

   justify-content: center;

   align-items: center;

 

 

亲元素相对定位，子元素绝对定位

给自己添加css属性：

margin: auto;

top: 0;

 bottom: 0;

 right: 0;

left: 0;

 

还是父相子绝，给子元素设定上面和右边的外间距

是父元素宽高的一半

 top: 50%;

 left: 50%;

 margin-top: -100px;

margin-left: -100px;

如果不知道宽高也可以利用calc来计算

 top: calc(50% - 100px);

left: calc(50% - 100px);

注意使用时+、-前后都必须要有空格

calc( )使用方法：

calc()从字面看我们可以把它理解为一个function函数。其实calc就是英文单词calculate(计算)的缩写；它是一个css3新增当我们的功能，可以用来指定元素的长度，动态计算长度值。当我们在需要设置样式或者使用某些样式时但是他们的长度没有办法确定时我们就需要使用calc函数来帮我们计算。

使用特点：

• 不需要换算单位，px vw em都可以直接使用不需要去转换。
• 使用calc后的计算值是表达式本身，不是计算结果。浏览器解析的值也是实际calc的表达式。这意味旨在浏览器中的值更加的动态，并且可以随着视图的变化而变化。
• 加减乘除都可以使用，可以被使用在<length> <time> <number>等中

• 使用“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；使用“*”和“/”时，其前后可以没有空格，但建议留有空格。

嵌套：

calc函数可以嵌套。但是，内部函数将被视为简单的括号表达式

.demo  {
 width: calc( 100% / calc(100px * 2) );
}

相当于

.demo  {
 width: calc( 100% / (100px * 2) );
}

 

还可以利用transform

        top:50%;

        left:50%;

        transform: translate(-50%,-50%);

 

 

 

 

利用网格布局：  display: grid;

给父元素设置网格布局并添加改变父元素内所有项目的交叉轴和主轴上的排列样式

           display: grid;

           align-items: center;

            justify-items: center;

 

也可以给父元素设定网格布局给子元素添加针对于自己的交叉轴和主轴上的排列样式

  align-self: center;

  justify-self: center;