欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS 水平垂直居中

程序员文章站 2022-03-18 15:37:05
方法一： 容器确定宽高：知识点：transform只能设置在display为block的元素上。 方法一效果图: 方法二： ......

方法一：

容器确定宽高：知识点：transform只能设置在display为block的元素上。



<head>
    <meta charset="utf-8">
    <title>title</title>
    <style type="text/css">
        #container{
            width: 500px; /* 确定！*/
            height: 300px;
            background-color: pink;
        }
        #child{
            width: 100px; /* 如果没有宽度，div充满容器，怎么水平居中 */
            position: relative; /* 相对父容器进行定位，规定top left值 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 如果不设置这个，其实是子div的左上原点是水平垂直居中，这个translate百分比是自身的百分比*/
            text-align: center; /* 里面的文字居中 */
        }
    </style>
</head>
<body>
<div id="container">
    <div id="child">哈哈哈哈</div>
</div>
</body>




方法一效果图:


CSS 水平垂直居中


方法二：


 利用 flex 布局
 实际使用时应考虑兼容性，flex不兼容ie9
父容器高度没有设置，那么其高度就是子容器撑开的，也就没有垂直居中这一说，只需要水平居中即可。





 .container {
     display: flex;
     align-items: center;         /* 垂直居中 */
     justify-content: center;    /* 水平居中 */
 }
 .container div {
     width: 100px;
     height: 100px;
     background-color: pink;        /* 方便看效果 */
 }  




 
					

																				

						

							上一篇：							
								cannot import name 'Flask' from 'flask'							
						

						

							下一篇：							
								c/c++ 友元的简单应用							
						

					

															

						

							推荐阅读