CSS实现DIV居中的三种方法

下面来讲解“CSS实现DIV居中的三种方法”的完整攻略。

1. 水平居中

方法一:使用text-align

让父元素的text-align属性设置为center,子元素则设置display:inline-block即可实现水平居中。

示例代码如下:

<style>
    .parent{
        text-align:center;
    }
    .child{
        display:inline-block;
    }
</style>
<div class="parent">
    <div class="child">我是要居中的元素</div>
</div>

方法二:使用flex布局

使用flex布局可以更简单地实现水平居中,只需要将父元素的display: flexjustify-content: center即可。

示例代码如下:

<style>
    .parent {
        display: flex;
        justify-content: center;
    }
    .child {
        /* 其他样式 */
    }
</style>
<div class="parent">
    <div class="child">我是要居中的元素</div>
</div>

2. 垂直居中

方法一:使用table布局

使用table布局可以实现垂直居中,让父元素和子元素都设置为display:table,并且让子元素设置为display:table-cellvertical-align:middle即可。

示例代码如下:

<style>
    .parent {
        display: table;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div class="parent">
    <div class="child">我是要居中的元素</div>
</div>

方法二:使用flex布局

使用flex布局可以更简单地实现垂直居中,只需要将父元素的display: flexalign-items: center,子元素的margin: auto即可。

示例代码如下:

<style>
    .parent {
        display: flex;
        align-items: center;
    }
    .child {
        margin: auto;
    }
</style>
<div class="parent">
    <div class="child">我是要居中的元素</div>
</div>

3. 水平垂直居中

方法一:使用absolute定位

使用绝对定位实现元素水平垂直居中,先让子元素的position:absolute,并且设置top:50%left:50%。然后让子元素以自身宽度的一半和高度的一半为偏移量分别设置margin-left:-自身宽度/2pxmargin-top:-自身高度/2px

示例代码如下:

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>
<div class="parent">
    <div class="child">我是要居中的元素</div>
</div>

方法二:使用flex布局

使用flex布局可以更简单地实现水平垂直居中,只需要将父元素的display: flexalign-items: center;justify-content: center;,子元素的widthheight就可以。

示例代码如下:

<style>
    .parent {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .child {
        width: 100px;
        height: 100px;
    }
</style>
<div class="parent">
    <div class="child">我是要居中的元素</div>
</div>

以上就是三种常见的CSS实现DIV居中的方法啦,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS实现DIV居中的三种方法 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 瀑布流的实现方式(原生js+jquery+css3)

    瀑布流是一种常见的页面布局方式,它会随着内容的不断加载,自动填充页面的空白区域,达到良好的视觉效果和用户体验。下面我来详细介绍一下瀑布流的实现方式(原生JS + jQuery + CSS3)。 HTML 结构 首先要有一个类似于如下的 HTML 结构: <div class="waterfall"> <div class…

    css 2023年6月10日
    00
  • Flask Cookie 使用方法详解

    Flask 是一个 Python Web 框架,Cookie 是一个小型文本文件,由服务器发送给 Web 浏览器并保存在本地计算机上,用于跟踪用户。本文将详细介绍 Flask 中的 Cookie 处理,并提供代码示例。 Flask 的 Cookie 模块 Flask 的 Cookie 模块是 Flask 对 Python 标准库中 Cookie 模块的封装。…

    Flask 2023年3月13日
    00
  • CSS框架开发指南

    CSS框架是一种用于快速构建网站和应用程序的工具,它提供了一组预定义的CSS样式和布局,可以帮助开发人员快速创建具有一致外观和感觉的网站。本攻略将介绍如何开发一个CSS框架,包括框架的设计、实现和使用。同时,本攻略将提供两个示例,以说明如何使用CSS框架来构建网站。 设计CSS框架 在设计CSS框架之前,需要考虑以下几个方面: 目标受众:框架的目标受众是谁?…

    css 2023年5月18日
    00
  • Vue transition过渡组件详解

    Vue transition过渡组件详解 Vue提供了过渡组件<transition>和<transition-group>,用于在元素插入或移出页面中时添加过渡效果。<transition>用于单个元素,<transition-group>用于多个相同类型的元素。这篇文章将详细讲解如何使用这两个组件,以及一些…

    css 2023年6月10日
    00
  • css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单

    为了实现可折叠导航菜单,需要使用CSS3和jQuery。下面是实现可折叠导航菜单的完整攻略。 使用HTML结构元素和CSS样式创建可折叠的导航菜单 使用HTML结构元素创建一个列表,其中每个列表项代表一个导航菜单条目。例如: <ul> <li><a href="#">Home</a><…

    css 2023年6月10日
    00
  • CSS3对背景图片的裁剪及尺寸和位置的设定方法

    CSS 3 增加了对背景图片的裁剪、尺寸和位置的控制,使得在网页设计中可以更加方便地使用背景图片。下面,我们将详细讲解“CSS3对背景图片的裁剪及尺寸和位置的设定方法”的完整攻略。 控制背景尺寸 在 CSS3 中,可以使用 background-size 属性来控制背景图像的尺寸。该属性可以使用以下值: auto:默认值,表示不改变背景图片的原始尺寸。 &l…

    css 2023年6月9日
    00
  • Chrome 83稳定版发布 更新内容汇总介绍

    Chrome 83稳定版发布 更新内容汇总介绍 Chrome 83是谷歌最新发布的一个版本,带来了一些新的功能和优化。以下是具体的更新内容。 安全性增强 Chrome 83包含了多项安全性增强功能,其中最重要的是“SameSite”标识符的更新。这将有助于防止一些跨站攻击(CSRF)的发生。更具体地说,Chrome 83会对Cookie的SameSite值进…

    css 2023年6月10日
    00
  • 详解css中background-clip属性的作用

    我为你讲解详解 CSS 中 background-clip 属性的作用。 什么是 background-clip 属性? background-clip 属性用于指定背景颜色或图片的绘制范围(裁剪区域),其值可以为 border-box、padding-box 或 content-box。 border-box:绘制的背景会延伸到边框的外侧。 padding…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部