CSS面试题-水平和垂直居中

系统管理员 2023-02-21 06:50 10阅读 0赞

## 单行文本——水平垂直居中（常用） ##

水平：text-align:center  
垂直：元素的高度hegight 等于元素行高 line-height

text-align:center;
    	 height: 30px;
    	 line-height: 30px;

## 多行文本/块级元素——垂直居中 ##

1.  **display:table实现（常用）**
    
    display: table使块状元素成为一个块级表格;
    
    display: table-cell;子元素设置成表格单元格;
    
    text-align:center;vertical-align: middle;使表格内容居中显示，即可实现水平垂直居中的效果;

<body>
    		<div class="father">
    	        <div class="son">我爱敲代码我爱敲代码我爱敲代码</div>
    		    </div>
    	</body>

.father { 
                width: 100px;
                height: 300px;
                border: 1px solid black;
                display: table;
            }
            
            .son { 
                display: table-cell;
                vertical-align: middle;
            }

1.  **定位：absolute和tansform实现（常用）**
    
    position:absolute; 首先给文本/块元素绝对定位；
    
    设置元素相对于父元素的 left:50%;top:50%;这时元素会在中央偏右下的位置
    
    transform:translate(-50%,-50%)，元素向左（上）平移它自己宽度（高度）的50%，达到居中效果

.father { 
                position: relative;
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
            
            .son { 
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100px;
                height: 100px;
                background-color: red;
                transform: translate(-50%, -50%);
            }

1.  **定位：relative和tansform实现(常用)**

.father { 
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
            
            .son { 
                position: relative;
                top: 50%;
                left: 50%;
                width: 100px;
                height: 100px;
                background-color: red;
                transform: translate(-50%, -50%);
            }

1.  **定位：把前面第2第3点方法中的transform改为margin**
    
    transform: translate(-50%, -50%)改为  
    margin-left：-元素宽度的一半； margin-top：-元素高度的一半；