子元素相对于父元素垂直居中对齐
生活随笔
收集整理的這篇文章主要介紹了
子元素相对于父元素垂直居中对齐
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
記個筆記
1. 元素相對于瀏覽器居中
<style>.window-center {/* 將position設置為fixed，使元素相對于瀏覽器窗口定位 */position: fixed;/* 將margin設置為auto，使瀏覽器自動推算元素外邊距 */margin: auto;/* 將上下左右邊距（相對于瀏覽器窗口邊緣）全設為0，使瀏覽器推算出的外邊距上下、左右對應相等可以設置任何其他相等的值，但如果窗口小到不能容下任意一個方向的兩側邊距，元素也將不居中，所以推薦設為0 */left: 0;right: 0;top: 0;bottom: 0;}div {/* 使用這種方法的元素必須有絕對或相對大小，否則瀏覽器推算出的margin將為0，元素將被拉伸，以適應窗口大小和四個邊距值 */width: 30%;height: 100px;background-color: antiquewhite;} </style><body> <div class="window-center"></div> </body>
?
2. 子元素相對于父元素居中：
首先，要把元素的position屬性值改為absolute，使其有可能相對于父元素定位，而不是相對于瀏覽器窗口定位。absolute指定元素相對于position值不為static的第一個祖先元素定位（如果找不到這樣的祖先元素，就相對于body），而static是元素position屬性的默認值
如果將父元素的position屬性設為relative，但不改變定位屬性（left、top等），那么就達到了既讓子元素相對于其定位，又不改變其默認布局方式的效果。
<style> div.parent {position: relative;/* 父元素可以有絕對或相對大小，也可以僅由其內容決定其大小 */width: 40%;height: 200px;background-color: aquamarine;}div.child {/* 使用這種方法的元素必須有絕對或相對大小，否則瀏覽器推算出的margin將為0，元素將被拉伸，以適應父元素大小和四個邊距值 */width: 30%;height: 100px;background-color: antiquewhite;}/* 這是一個用于演示父元素的默認定位未被影響，并且子元素確實是相對于父元素居中的干擾元素 */#commonDiv {width: 100px;height: 100px;background-color: cadetblue;} </style><body> <!-- 2. 子元素居于父元素垂直水平中 <div id="commonDiv"></div><div class="parent"><div class="parent-center child"></div></div>--> </body>?
3， 彈性盒子flex感覺不太行，不知道為什么， 知道的朋友歡迎隨時留言
?
?
來源：https://www.cnblogs.com/zhuxinghan/p/6031678.html
?
轉載于:https://www.cnblogs.com/jliu520222/p/9799426.html
總結
以上是生活随笔為你收集整理的子元素相对于父元素垂直居中对齐的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 98k用计算机图片,98K （HandC
- 下一篇： 2008年12月31日，博客园开博