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日

相关文章

  • jQuery实现图片局部放大镜效果

    首先,我们需要明确几个概念:放大镜效果,鼠标移动事件以及坐标计算。 放大镜效果指的是鼠标悬停在图片上时,在某一区域内看到放大后的图片效果。鼠标移动事件指的是鼠标从一个点移动到另一个点的事件,坐标计算则是指根据鼠标位置计算图片区域的位置和大小。 具体实现步骤如下: 引入jQuery库,并在HTML文档中添加一个div,用于展示放大后的图片效果。 <scr…

    css 2023年6月10日
    00
  • js实现模拟购物商城案例

    “js实现模拟购物商城案例”具体实现步骤如下: 1. 界面设计 首先,我们需要进行界面设计,包括商品列表、购物车列表等。可以采用HTML+CSS进行设计。 2. 数据存储 接下来,需要定义商品数据、购物车数据等信息。我们可以将这些信息存储在JSON格式的文件中,或者通过API从后端获取。 3. 商品列表展示 利用jQuery或原生JS编写代码,将后台数据展示…

    css 2023年6月10日
    00
  • jQuery实现的背景颜色渐变动画效果示例

    下面我将详细讲解“jQuery实现的背景颜色渐变动画效果示例”的完整攻略。 简介 jQuery是一个流行的JavaScript库,它提供了许多方便的功能和方法,可以帮助我们更加轻松地操作页面元素。其中包括对背景颜色渐变的支持。我们可以使用jQuery实现非常漂亮的背景颜色渐变动画效果,给用户一种非常视觉冲击的感受。 示例1 下面是一个简单的示例,展示如何使用…

    css 2023年6月11日
    00
  • css 评分效果的星星示例

    以下是关于“CSS评分效果的星星示例”的完整攻略,包含两个示例说明。 步骤一:创建HTML结构 首先,需要创建一个HTML结构。可以按照以下步骤操作: 在文本编辑器中创建一个新文件。 在文件中添加以下代码: <div class="rating"> <input type="radio" name=&…

    css 2023年5月18日
    00
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效

    下面就为您详细讲解“巧用 CSS3的webkit-box-reflect 倒影实现各类动效”的完整攻略。 什么是CSS3的webkit-box-reflect CSS3的webkit-box-reflect是一种CSS3的属性,可以在盒子(box)下面添加一个倒影。它是Webkit浏览器的私有属性,只能在Webkit内核的浏览器中使用,比如Chrome和Sa…

    css 2023年6月11日
    00
  • JavaScript实现div的鼠标拖拽效果

    对于 “JavaScript实现div的鼠标拖拽效果” 这个问题,我将分为以下几个部分来进行详细讲解: 实现思路 相关API及代码示例 注意事项和遇到的问题及解决方法 1. 实现思路 实现鼠标拖拽的原理是:当鼠标在可拖拽元素上按下时,我们需要记录下相应的鼠标位置以及元素的位置信息,并在后续鼠标移动时进行计算,以实现元素跟随鼠标移动的效果,然后在鼠标抬起时,停…

    css 2023年6月10日
    00
  • Bootstrap Studio图文激活教程 快速安装激活真实有效

    Bootstrap Studio图文激活教程 本教程将介绍如何使用Bootstrap Studio进行快速安装和激活,以及相关注意事项。在开始之前,请确保你已经购买了许可证并下载了Bootstrap Studio软件。 快速安装 按照以下步骤进行快速安装: 打开下载的ZIP文件并解压到本地。 双击打开“Bootstrap Studio.exe”可执行文件。 …

    css 2023年6月10日
    00
  • 利用Vue实现卡牌翻转的特效

    对于“利用Vue实现卡牌翻转的特效”的完整攻略,我将为您提供以下的步骤和示例: 第一步:创建Vue组件 首先,我们需要创建一个Vue组件,该组件将负责显示我们的卡牌,并在翻转过程中改变显示内容。组件代码如下: <template> <div class="card" :class="{flipped: isFl…

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