三种方式实现div垂直水平居中

最新推荐文章于 2023-09-20 13:51:42 发布

日京

最新推荐文章于 2023-09-20 13:51:42 发布

阅读量707

点赞数 3

分类专栏：前端文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_43719616/article/details/109622173

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

起因是因为一个人问我怎么实现水平垂直居中，我回答说margin：0 auto然后再align-item：center，额结局就是他说我说错了，还说我是不是没做过，啊啊啊啊啊啊很不开心，很羞耻，所以马上就百度了一下。后来总结了一下三种。
1.用display中的table-cell

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div居中</title>
		<link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <style>
        .father{
            width: 800px;
            height: 300px;
            border: 1px solid red;
            display: table-cell;
            vertical-align: middle;      
        }
        .div_con{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>
	<body>
		<div class="father">
            <div class="div_con">
            
            </div>
        </div>
	</body>
</html>

2.用定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div居中</title>
		<link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <style>
        .father{
            width: 800px;
            height: 300px;
            border: 1px solid red;
            position: relative;
        }
        .div_con{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            top:50%;
            background-color: yellow;
            margin-left: -50px;/*子div宽度的一半*/
            margin-top: -50px; /*子div高度的一半*/
            
        }
    </style>
	<body>
		<div class="father">
            <div class="div_con">

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

3.另外一种定位（最常用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div居中</title>
		<link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <style>
        .father{
            width: 800px;
            height: 300px;
            border: 1px solid red;
            position: relative;

           
        }
        .div_con{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: yellow;
        }
    </style>
	<body>
		<div class="father">
            <div class="div_con">

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

日京

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种方式实现div垂直水平居中

起因是因为一个人问我怎么实现水平垂直居中，我回答说margin：0 auto然后再align-item：center，额结局就是他说我说错了，还说我是不是没做过，啊啊啊啊啊啊很不开心，很羞耻，所以马上就百度了一下。后来总结了一下三种。1.用display中的table-cell<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>div居中</title>
复制链接

扫一扫