元素居中的六种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 2px solid red;
            /* 第二种方法  */
            /* display: flex;
            justify-content: center;
            align-items: center;*/
             /* 将主轴方向扭转 */
             /* flex-direction: column; */
            /* 多余部分是否换行 */
            /* flex-wrap: nowrap; */
            /* flex-direction  与 flex-warp  简写形式   */
            /* flex-flow: column nowrap; */
            /* 第三种方法 */
            /* position: relative; */
            /* 第四种  */
            /* text-align: center; */
            /* 第五种方法  */
            /* position: relative; */
            /* 第六种 方法 使用表格 */
            /* display: table-cell;
            vertical-align: middle; */
        }
        .div{
            width: 200px;
            height: 200px;
            background-color: aqua;

            /*第一种 元素居中 */
            /* margin: 150px auto; */
            /* 第三种  使用定位 */
            /* position: absolute;
            top:150px;
            left: 150px; */
            /* 第四种 将子元素 转为行内块元素 在 用text-align:center;*/
            /* display: inline-block; */
            /* 第五种 子元素 加定位 0px 再加 margin :auto; */
            /* position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto; */
            /* 第六种方法  */
            /* margin: 0 auto; */

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div"></div>
    </div>
</body>
</html>

  

原文地址:https://www.cnblogs.com/GreenRadish/p/11319134.html

时间: 2024-10-11 01:00:54

元素居中的六种方法的相关文章

浮动元素居中的实现方法~~很不错

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float center</title> <style> .demo { /*最外层容器居中 非必要*/ border: 1px solid #CCC; margin: 5px auto; overflow: hidden; width: 143

居中的六种方法

居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.早期总结了一下互联网上有关于水平垂直居中的几种实现方案,比如说<CSS制作水平垂直居中对齐>中介绍了八中实现水平垂直的方案,而在<CSS制作图片水平垂直居中>一文介绍了四种实现图片垂直居中的方案,并且在<CSS3实现水平垂直居中>使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法.当然大家有可能认为这些

元素居中显示的方法总结

水平居中: 1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)(比如文本元素或者a链接) ①可以使用text-align:center 固定宽度的块级元素 ①使用margin:0 auto实现水平居中 ②绝对定位,left:50%,margin-left:-1/2元素宽度 垂直居中: 1.elements的display属性为inline或者inline-*(inline-block,inli

不定宽块状元素居中方法

在实际的编写代码过程中,我们会遇到要为"不定宽块状元素"设置居中,比如网页上的分页导航,因为分页的数量不确定,所以我们不能通过设置宽度来限制它的弹性. 不定宽的块状元素有三种方法设置居中: 一.设置table标签: 利用table标签的自适应长度(table其长度根据其文本内容的长度决定),因此可以看做是"定宽度块元素",然后利用顶宽度块状元素居中的margin方法,使其水平居中. 例1:HTML代码 1 <!DOCTYPE html PUBLIC "

使用CSS完成元素居中的七种方法

在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至少有六种实现居中的方法.我将使用下面的HTML结构从简单到复杂开始讲解: <div class="center">  <img src="jimmy-choo-shoe.jpg" alt></div> 鞋子图片会改变,但是他们都会保持

实现元素的垂直与水平居中的六种方法

一. img的垂直水平居中 使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用,如果想使用在img元素上,就注意下面的display设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

照片与同行元素居中的方法

1.照片与同行元素居中的方法:将同行元素和照片同时设置vertical-align:middle; <html><head> <title></title> <style type="text/css"> img{ vertical-align:middle; } span{ vertical-align: middle; } </style></head><body> <p>&

css中元素居中的几种方法

对于在网页端布局,垂直居中难于水平居中,同时实现水平和垂直居中是最难的.在移动端,因为设备的宽高是可变的,故一些方案很难实现.以下使用几种方案对下面的html去实现居中,如有不足,可以提出宝贵的意见: <div class="center"> <img src="1.jpg" alt> </div> 1. 使用text-align水平居中 这种方案只能使水平居中,要想垂直居中的话,要给div添加padding或给内容添加margi