div 水平垂直居中(开发常用的四种方式)

最新推荐文章于 2023-09-11 18:44:00 发布

dong1116

最新推荐文章于 2023-09-11 18:44:00 发布

阅读量117

点赞数

分类专栏：瓜皮的日常文章标签： css

本文链接：https://blog.csdn.net/dong1116/article/details/115836991

版权

瓜皮的日常专栏收录该内容

5 篇文章 1 订阅

订阅专栏

方式一

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            /* 注:absolute定位,会相对最近的有定位的父元素进行定位,如果没有,则相对于(浏览器可视区域)进行定位 */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: #cfa;
        }
    </style>
    
	<div></div>

方式二

	<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            /* 注:absolute定位,会相对最近的有定位的父元素进行定位,如果没有,则相对于(浏览器可视区域进行)进行定位 */
            position: absolute;
            width: 100px;
            height: 100px;
            left: 50%;
            top: 50%;
            /* -自身宽高的一半 */
            margin-top: -50px;
            margin-left: -50px;
            background-color: #cfa;
        }
    </style>
	<div></div>

方式三

	<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            /* 注:absolute定位,会相对最近的有定位的父元素进行定位,如果没有,则相对于(浏览器可视区域进行)进行定位 */
            position: absolute;
            width: 100px;
            height: 100px;
            left: 50%;
            top: 50%;
            /* -自身宽高的一半 */
            transform: translate(-50%,-50%);
            background-color: #cfa;
        }
    </style>
    <div></div>

方法四

	<style>
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        div{
            width: 100px;
            height: 100px;
            background: #fac;
        }
    </style>

	<div></div>