css居中方式

CSS各种居中方法

1. 水平居中的text-align:center 和 margin:0 auto

   前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响。

2. 垂直居中的line-height

   作用在父元素上，当他的值等于父元素的height值时，内部的文字就会自动的垂直居中

3. 万能position大法

（1）首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。
（2）接下去，写上子元素的height和width
（3）再给子元素再打上top:50%; left:50%以及margin-top:一半的height值的的负数; margin- left:一半的weight值的负数。

例子

效果图

<div class="main">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>

水平垂直居中

.main{
    width: 400px;
    height: 200px;
    background-color: #ccc;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -100px;
    margin-left: -200px;
}

半圆

.left{
    background-color: #FC0;
    border-radius: 0 0 50px 0;
    width: 50px;
    height: 50px;
}
.right{
    background-color: #FC0;
    border-radius: 50px 0 0 0;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    bottom: 0;
}