当前位置：网站首页>Centering problem - the width and height of child elements are known

Centering problem - the width and height of child elements are known

2022-06-13 08:34:00 【Just one time】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> In the middle </title>
		<style> .box{
       width: 400px; height: 400px; background-color: pink; /*  Method 1 */ /* overflow: hidden; */ /*  Method 2 */ /* padding: 100px 100px; box-sizing: border-box; */ /*  Add... To the parent element padding  Parent element converted to ie The box model */ /*  Method 3 */ /* display: flex; justify-content: center; align-items: center; */ /*  Method 4 */ /* position: relative; */ /*  Set relative positioning   The child element is positioned relative to the parent element  */ /*  Method 5 */ /* position: relative; */ /*  Method 6 */ /* display: table-cell; text-align: center; vertical-align: middle; */ /*  Convert to table item  */ } .box1{
       width: 200px; height: 200px; background-color: #00BFFF; /*  Method 1 */ /* margin: 100px 100px; */ /*  Add to child elements margin Parent element overflow:hidden */ /*  Method 4 */ /* position: absolute; left: 100px; top: 100px; */ /*  Set relative positioning   The child element is positioned relative to the parent element  */ /*  Method 5 */ /* position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; */ /*  Set relative positioning   The child element is positioned half as high as the parent element   The child element is positioned half the width of the parent element   The last child element is offset to the left -100px(-100px Express ) */ /*  Method 6 */ /* display: inline-block; */ /*  Method 7 */ transform: translate(100px,100px); } </style>
	</head>
	<body>
		<!--  The child element is inside the parent element   Child elements are centered horizontally and vertically  -->
		<div class="box">
			<div class="box1">

			</div>
		</div>
		
	</body>
</html>

Case diagram

原网站

版权声明
本文为[Just one time]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202270540177770.html

边栏推荐

猜你喜欢

随机推荐