如何實現婚戀app原始碼中元素水平垂直居中？

就人們的審美標準而言，在進行婚戀app原始碼UI設計時，需要實現相關元素的水平垂直居中，這樣才能帶給使用者更舒適的視覺感受，但是在婚戀app原始碼開發中，都有哪些讓元素水平垂直居中的方法呢？

婚戀app原始碼中的行內元素

<div class="demo1">1111</div

.demo1 {
  width: 100px;
  height: 30px;
  border: 1px solid #333;
}

line-height + text-align

.demo1 {
  /* 水平居中 */
  text-align: center;
  /* 垂直居中： line-height = height */
  line-height: 30px;
}

婚戀app原始碼中的行內塊狀元素

line-height + vertical-align + text-align

vertical-align 只能應用在行內元素和單元格元素上。

<div class="demo1">
  <img src="複製程式碼
.demo1 {
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  /* 關鍵程式碼 */
	text-align: center;
  line-height: 200px;
}
img {
    vertical-align: middle;
}

display: table/table-cell + vertical-align + text-align

<div class="demo1">
  <div class="content">
    <p>1111111</p>
    <p>2222222</p>
  </div></div>

.demo1 {
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  /* 關鍵程式碼 */
  display: table;
}
.content {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

婚戀app原始碼中的塊狀元素

<div class="parent">
    <div class="child"></div></div>

position + margin

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

flex + margin

.parent {
    display: flex;
    /* 定義專案在主軸上如何對齊 */
    justify-content: center;
    /* 定義專案在交叉軸上如何對齊 */
    align-items: center;
}

或者

.parent {
  display:flex;
}
.child {
  margin: auto;
}

grid

.parent {
    display: grid;
}
.child {
    justify-self: center;
    align-self: center;
}

或者

.parent {
    display:grid;
}
.child {
    margin: auto;
}

以上便是“婚戀app原始碼開發中，元素水平垂直居中常用方法”的全部內容，婚戀app原始碼開發中涉及到的元素多種多樣，所以常用方案也並不相同，希望以上分享能帶給大家一些幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：