DIV居中方案

今天药忘吃喽~ 2022-06-10 00:10 184阅读 0赞

## 水平居中 ##

//给div设置一个宽度，然后添加margin:0 auto属性
     div{
        width:200px;
        margin:0 auto;
      }

## 让绝对定位的div居中 ##

div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: red; /* 方便看效果 */ }

## 水平垂直居中一 ##

// 确定容器的宽高 宽500 高 300 的层
     设置层的外边距
    div {
        position: relative;     //相对定位或绝对定位均可 
        width:500px;
        height:300px;
        top: 50%;
        left: 50%;
        margin: -150px 0 0 -250px;      //外边距为自身宽高的一半
        background-color: red;      //方便看效果
    
      }

## 水平垂直居中二 ##

//未知容器的宽高，利用 `transform` 属性
    
     div {
        position: absolute;     //相对定位或绝对定位均可
        width:500px;
        height:300px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: pink;     //方便看效果
    
     }

## 水平垂直居中三 ##

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

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 div内容居中(div块内容居中)

如何让div内容居中？让div文字居中如果要让DIV中的文字居中，就得用到文字对齐方式代码text-align:center，这个居中默认为水平居中，详细代码写法如下：

男娘i/ 2023年09月26日 11:56/ 0 赞/ 45 阅读

相关 div居中显示(div在页面居中显示)

如何使div中div的内容居中显示 ![Image 1][] 超链接其中是为了让超链接换行 ; padding-top:\\px;是为了垂直居中，具体是多少

冷不防/ 2023年09月26日 11:56/ 0 赞/ 81 阅读

相关 div 整体居中

<div style="margin:0px auto;text-align:center;"> <img src="' style="margin:1px;wid

忘是亡心i/ 2022年09月23日 14:51/ 0 赞/ 183 阅读

相关 DIV CSS 居中

你对DIV CSS居中的方法是否了解，这里和大家分享一下，用CSS让元素居中显示并不是件很简单的事情，让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 DIV C

清疚/ 2022年08月27日 02:26/ 0 赞/ 290 阅读

相关 DIV CSS字体居中实现DIV文字水平左右居中

> DIV CSS字体居中实现DIV CSS文字水平左右居中-css+div字体文字内容居中篇，使用DIV CSS实现字体居中的CSS样式单词为text-align，其值为ce

淩亂°似流年/ 2022年08月03日 15:40/ 0 赞/ 298 阅读

相关 DIV居中方案

水平居中 //给div设置一个宽度，然后添加margin:0 auto属性 div{ width:200px; marg

今天药忘吃喽~/ 2022年06月10日 00:10/ 0 赞/ 185 阅读

相关 div内元素居中

![这里写图片描述][SouthEast] <!DOCTYPE html> <html> <head> <meta charset="U

淩亂°似流年/ 2022年05月28日 05:35/ 0 赞/ 183 阅读

相关 div 背景图居中

这里主要是 background-position: center;属性很给力 div{ width: 100%;

我就是我/ 2022年05月12日 07:14/ 0 赞/ 198 阅读

相关关于div居中

1.style 内联样式 <div style="width:200px;margin:0 auto;"> 内容 </div> // 由于本人不是多

谁践踏了优雅/ 2022年04月13日 08:53/ 0 赞/ 211 阅读

相关 CSS——div垂直居中及div内文字垂直居中

　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。一、div垂直居中的一些

旧城等待，/ 2021年12月21日 11:29/ 0 赞/ 484 阅读