使用flexbox，很多布局問題都可以解決，今天分享一個所有子元素居中對齊的樣式。

涉及到居中的樣式CSS主要是align-items:center;

需求是需要中間的某個塊不要占全部，而是自適應子元素內容擴展。

<div class="box">
	<ul class="box-inner">
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
	</ul>
</div>

樣式：

.box{
	position: fixed;
	right: 0;
	top: 0;
	height: 100%;
	width: 40px;
	right: 15px;
	display: flex;
	align-items: center;
	background: rgba(0,0,0,0.5);
}
.box-inner{
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	text-align: center;
	background: #ddd;
}
.box-inner li{
	width: 40px;
	white-space: nowrap;
	color: #f00;
}

實現效果，中間的一塊不是鋪滿整個屏幕，而是根據里面的子元素自適應大小居中。

演示

記錄這篇代碼是因為我以為子元素的外面的元素無法自適應擴展高度，需要占據整個高度，后來看到一個同事寫的代碼才發現原來嵌套多一層子元素，并設置里面的資源為flexbox時，它就不會占據整個高度了。

題外話：

有一段時間沒寫文章記錄了，感覺學習到的東西很淺顯，所以也沒有去記錄的意愿，前段時間去搞微信和頭條號，還以為能搞出些名堂來，結果是發現花費了很多時間，但卻收獲不大，而且經常還熬夜，有時候還因為被人鄙視內容不夠好，我想我可能還沒有準備好。

暫時先放棄了，接下來的日子里專心的寫一寫之前的一些記錄，哪怕再小的東西，也不要去管有沒有人關注；有沒有人因為看到這些東西而取消關注你。也許某天你還會遇到，就會一個印象了。

我不是大牛，我只是覺得自己比較喜歡整理一些東西，純粹是記錄并分享一些自己的成長，僅此而已。

總結

以上是生活随笔為你收集整理的display:flex完全居中子元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。