html css元素的居中

html css元素的居中

1.块级元素的水平居中
html 代码：

    
"father">
        
"son">块级元素
            
我是文本
        
    

css代码：

.father{
            width: 300px;
            height: 300px;
            background-color: #1d90ff;
            margin: 0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            /*左右两边的边距 设为自适应 就能实现块级元素的水平居中
            前提是 此元素和父元素都设置了高度
            */
            margin: 0 auto;
            background-color: lightgreen;

        }

效果：