css兩種經常使用的不定寬高的水平垂直居中方法，記住它，再也不爲樣式發愁

css 幾種經常使用的簡單容易記住的水平垂直居中方法

• 前言
• 正文
• 第一種方法
• 第二種方法
• 結束語

前言

咱們在設計網頁時，會大量的運用到水平垂直居中，若是知道元素的寬高，那水平垂直居中是很簡單的，無非是用一下margin就能夠完成，這裏就不向你們作過多的解釋了。可是，若是不知道元素的寬高呢？ 是否是就會在這上面用點心思了，接下來我給你們介紹兩種我設計網頁時經常使用的兩種不定寬高的元素水平居中方法吧，放心絕對容易記。

正文

首先來建立一個html頁面，html代碼和css代碼以下：

<div class="box">
     <div class="content">我是box中的內容</div>
</div>
<style> .box{ width: 600px; height: 300px; background: lightgreen; } .content{ background: red; } </style>

效果圖：

接下來咱們就在這個基礎上，對紅色方框的元素標籤進行水平垂直居中的操做

第一種方法

第一種方法我強烈推薦，用到了咱們熟悉的flex佈局。

• 元素標籤內容

<div class="box">
     <div class="content">我是box中的內容</div>
</div>

• 樣式內容

.box{
    width: 600px;
    height: 300px;
    background: lightgreen;
	/*如下三個樣式就能實現水平垂直居中*/
    display: flex;                 /*先開啓flex佈局*/
    justify-content: center;       /*實現水平居中*/
    align-items: center;           /*實現垂直居中*/
}
.content{
    background: red;
}

• 效果圖
  
  是否是很是的方便呢？只須要三個在外部元素標籤設置三個樣式就能實現內部元素的水平垂直居中。

第二種方法

第二種方法運用的就是定位和transform的知識來實現水平垂直居中

• 元素標籤內容

<div class="box">
  	<span class="content">我是box中的內容</span>
</div>

• 樣式內容

.box{
   width: 600px;
   height: 300px;
   background: lightgreen;
   position: relative;        /*外部元素開啓relative定位*/
}
.content{
   background: red;
   position: absolute;       /*內部元素開啓absolute定位*/
   top: 50%;                 /*向下移動父級高度的50%*/
   left: 50%;                /*向右移動父級寬度的50%*/
   transform: translate(-50%, -50%);  /*向上、向左移動自身高度、寬度的50%,即完成了*/
}

• 效果圖
  
  一樣的，跟第一種方式的效果同樣，也完成了水平和垂直的居中。

結束語

這裏只向你們介紹了兩種我我的認爲經常使用並且方便記住的方法，尤爲是第一種方法，是我用的最最最最多的，但願這篇文章能幫助大家解決不定寬高元素水平垂直居中的問題。