怎么居中？ – CSS筆記

居中是在中經常被抱怨的問題之一。這個問題真的有這么難嗎？事實上這個問題并，它在于對于，居中問題需要用到的方法。CSS沒有那么復雜困難不同的情景解決不一樣,在這里，我們會一起建立來幫助大家來這個問題。

• 原文地址：詳情
• 項目地址：Github

水平居中

行內元素

display屬性為?或者?行內元素?（例如：文本或者鏈接）inlineinline-*

如果你需要居中的在中，你可以使用下面方法。行內元素塊級元素

.center-children {
	text-align: center;
}

例子：傳送門

單個 – 塊級元素

如果需要使得，可以利用和。塊級元素居中margin-leftmargin-right

.center-me {
	margin: 0 auto;
}

例子：傳送門

注意：不能是一個浮動的塊級元素哦~

多個 – 塊級元素 – 同行居中

如果需要使得，這個時候用?可就不行啦，但是我們可以使用或者來實現居中。多個塊級元素居中magininline-blockflexbox

inline-block

適合一個父div中兩個子div居中

利用在中的居中方法，先讓的變為行內元素，再對的使用居中。行內元素塊級元素內部塊級元素父級塊級元素

.center-parent {
	text-align: center;
}
.center-parent .center-child{
	display: inline-block;
}

例子

我是內容文本1我是內容文本1我是內容文本1

flexbox

.center-parent {
	display: flex;
	justify-content: center;
}

例子：傳送門

多個 – 塊級元素 – 同列居中

#####利用的方法,來實現的。單個塊級元素居中多個塊級元素垂直居中

.center-me {
	margin: 0 auto;
}

例子：傳送門

垂直居中

單行 – 行內元素

display屬性為?或者?行內元素?（例如：文本或者鏈接）?？梢岳没蛘邅韺崿F。inlineinline-*paddingline-height

padding

.text {
	padding-top: 30px;
	padding-bottom: 30px;
}

例子：傳送門

line-height （值和一樣）height

.text {
	height: 100px;
	line-height: 100px;
}

例子：傳送門

多行 – 行內元素

對于多行，如果使用的方法，在換行之后，會出現錯誤。這個時候可以利用的或者或者來實現。行內元素單行表格vertical-alignflexbox偽類

vertical-align

.center-table {
	display: table;
}
.center-table p {
	display: table-cell;
	vertical-align: middle;
}

例子：傳送門

flexbox

.center-flexbox {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

例子：傳送門

偽類

.center-parent {
	position: relative;
}
.center-parent::before {
	content: "";
	display: inline-block;
	height: 100%;
	width: 1%;
	vertical-align: middle;
}
.center-parent p {
	display: inline-block;
	vertical-align: middle;
}

例子：傳送門

塊級元素

元素高度知道

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	height: 100px;
	margin-top: -50px; // 高度的一半
}

例子：傳送門

元素高度不知道

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

例子：傳送門

flexbox

.parent {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

例子：傳送門

垂直水平居中

寬度和高度知道(利用的高度知道)垂直居中塊級元素

.parent {
  position: relative;
}

.child {
  width: 200px;
  height: 100px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -50px 0 0 -100px;
}

例子：傳送門

寬度和高度不知道(利用的高度不知道)垂直居中塊級元素

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

例子：傳送門

flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

相關文章：