天天看點
傳回

【CSS】實作元素水準垂直居中布局（七種方法）

文章目錄

    • 一、絕對定位（absolute）
      • 1.1、margin 外邊距
      • 1.2、transform 轉換
    • 二、轉換類型（display）
      • 2.1、flex 彈性布局
      • 2.2、grid 網格布局
      • 2.3、table 表格布局
      • 2.4、inline 内聯元素
      • 2.5、inline-block 内聯塊元素

一、絕對定位（absolute）

1.1、margin 外邊距

  • 核心代碼： 
/* 父元素 */
position: relative;

/* 子元素 */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* 自适應外邊距 */
  • 示例： 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Document</title>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
            position: relative;
        }

        .centerbox {
            height: 100px;
            width: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="centerbox"></div>
    </div>
</body>
</html>
  • 結果：
    【CSS】實作元素水準垂直居中布局（七種方法）

1.2、transform 轉換

  • 核心代碼： 
/* 父元素 */
position: relative;

/* 子元素 */
position: absolute; /*設定絕對定位*/
/*相對第一個不是static定位的父盒子進行定位*/
/*static是postion的預設屬性*/
left: 50%;
top: 50%;
/*距離第一個不是static定位的父元素上邊框與左邊框50%*/
transform: translate(-50%, -50%);
/*向左移動50%本元素寬度*/
/*向上移動50%本元素高度*/
  • 示例： 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Document</title>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
            position: relative;
        }

        .centerbox {
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="centerbox"></div>
    </div>
</body>
</html>
  • 結果：
【CSS】實作元素水準垂直居中布局（七種方法）

二、轉換類型（display）

2.1、flex 彈性布局

  • 核心代碼 
/* 父元素 */
display: flex; /* 父元素flex布局 */
justify-content: center; /* 子元素水準居中 */
align-items: center;/* 子元素垂直居中 */
  • 示例： 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Document</title>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
            display: flex;
			justify-content: center;
			align-items: center;
        }

        .centerbox {
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="centerbox"></div>
    </div>
</body>
</html>
  • 結果：
    【CSS】實作元素水準垂直居中布局（七種方法）

2.2、grid 網格布局

  • 核心代碼： 
/* 父元素 */
display: grid;

/* 子元素 */
justify-self: center; /* 水準居中 */
align-self: center; /* 垂直居中 */
  • 示例： 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Document</title>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
			display: grid;
        }

        .centerbox {
            background-color: aqua;
			width: 100px;
			height: 100px;
			justify-self: center;
			align-self: center;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="centerbox"></div>
    </div>
</body>
</html>
  • 結果：
    【CSS】實作元素水準垂直居中布局（七種方法）

2.3、table 表格布局

  • 核心代碼： 
/* 父元素 */
display: table-cell;  
vertical-align: middle;/* 垂直居中 */    
text-align: center;/* 水準居中 */

/* 子元素 */
display: inline-block;
  • 示例： 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Document</title>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
			display: table-cell;  
			vertical-align: middle; /* 垂直居中 */    
			text-align: center; /* 水準居中 */
        }

        .centerbox {
            background-color: aqua;
			width: 100px;
			height: 100px;
			display: inline-block;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="centerbox"></div>
    </div>
</body>
</html>
  • 結果：
    【CSS】實作元素水準垂直居中布局（七種方法）

2.4、inline 内聯元素

行内式元素水準垂直居中
  • 核心代碼： 
/* 子元素 */
text-align:center;
line-height:200px; /* line-height值為父元素高度 */
  • 示例： 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Document</title>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
        }

        .centerbox {
            background-color: aqua;
			text-align: center;
			line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="centerbox">居中文本</div>
    </div>
</body>
</html>
  • 結果：
    【CSS】實作元素水準垂直居中布局（七種方法）

2.5、inline-block 内聯塊元素

  • 實作方法： 
1. 必須給容器（父元素）加上text-align：center；
2. 必須給目前元素轉成行内塊元素display：inline-block；再給目前元素加上vertical-align：middle；
3. 在目前元素的後面（沒有回車）加上同級元素span；并且對span進行vertical-align：middle；width：0；height：100%；display：inline-block；
  • 示例： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 200px;
				border: aqua 1px solid;
				text-align: center;
			}
			p {
				width: 100px;
				height: 100px;
				border: aqua 1px solid;
				display: inline-block;
				vertical-align: middle;
			}
			span {
				width: 0;
				height: 100%;
				display: inline-block;
				vertical-align: middle;
			}
		</style>

	</head>
	<body>

		<div>
			<p></p><span></span>
		</div>

	</body>
</html>
  • 結果：
【CSS】實作元素水準垂直居中布局（七種方法）
CSS / SASS / SCSS 筆記 css 水準居中 垂直居中 水準垂直居中
上一篇: hdu 個人排位賽 Travel
下一篇: List拆分成指定大小的subList

繼續閱讀