【CSS】定位盒子居中的完美写法

    
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>定位盒子居中的便捷写法title>
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		nav {
    			height: 150px;
    			background-color: skyblue;
    			position: relative;
    		}
    		div {
    			height: 50px;
    			width: 50px;
    			background-color: pink;
    			position: absolute;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%, -50%);
    		}
    	style>
    head>
    <body>
    	<nav>
    		<div>div>
    	nav>
    body>
    html>

效果预览图:
【CSS】定位盒子居中的完美写法_第1张图片

你可能感兴趣的:(定位,盒子居中,css,css)