CSS水平居中的几种方法

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量160 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41832686/article/details/80273369
版权

CSS水平居中的几种方法

  1. margin: 0 auto; 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
    .fa{
        width: 500px;
        height: 500px;
        background-color: #ccc;

    }


    .son{
        width: 100px;
        height: 100px;
        background-color: #c60;
        margin: 0 auto;
    }

</style>
</head>
<body>
<div class="fa">
    <div class="son"></div>
</div>
</body>
</html>

2.通过display:flex实现CSS水平居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
    .fa{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        display: flex ;
        flex-direction: column;

    }


    .son{
        width: 100px;
        height: 100px;
        background-color: #c60;
        margin: 0 auto;
        align-self: center;
    }

</style>
</head>
<body>
<div class="fa">
    <div class="son"></div>
</div>
</body>
</html>

3.通过position:absolute

4.

夏季梦幻想
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现元素水平垂直居中的各种方法
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
css实现div水平垂直居中的几种方法
qq_18294533的博客
01-01 530
css实现div水平垂直居中的几种方法一 . 给父div设置合适的padding二 . 通过position属性实现居中三 . 通过flex实现居中 一 . 给父div设置合适的padding ##父div设置padding 二 . 通过position属性实现居中 1.设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; mar...
CSS实现: 水平居中 的几种方法
qq_53985958的博客
06-28 2万+
margin值auto、position(子绝父相)+偏移值left+margin-left、position+偏移left+CSS2d transform、text-align:center;+display:inline-block;、display:flex;justify-content:center;margin塌陷:父元素为BFC:overflow:hidden;只设置left:50%;不能实现水平居中:left:50%;与transform:translateX(-50%);中的50%意义不同
css 水平居中的几种方法
sinat_33384251的博客
10-31 473
1，水平居中（text-align：center;） 这个属性在没有浮动的情况下，我们可以将其转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中 <style> body{margin: 0;} .box{ width: 400px; height: 400px; border:1px solid red;
css实现文本内容水平居中的4个方法
爱分享
03-31 5963
以上是几种实现文本垂直居中和水平居中的方式，每种方式都有其适用的场景和优缺点。其中，利用margin:auto和position:absolute的方式需要知道元素的宽度和高度，适用于元素宽高固定的情况。利用table的方式比较适用于多行文本的垂直居中。可以给父元素设置display: flex，并给子元素设置align-items和justify-content属性来实现文本的水平垂直居中。利用position: absolute和top、bottom、left、right属性来实现文本的水平垂直居中。
CSS中实现元素水平居中、垂直居中的6个方法（详解）
xtcbql的博客
09-30 2万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
css实现水平垂直居中的几种方式
一个慢的博客
01-23 3526
水平垂直居中的几种方式 总结了一下css实现水平垂直居中比较常用的几种方法 居中元素宽高固定时的方法 absolute + top:50% left:50% + margin负值 absolute + top:0 left:0 right:0 botton:0 + margin:auto absolute + top:calc left:calc 居中元素宽高未知时的方法 absolute...
CSS水平垂直居中的几种方法总结
09-24
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
CSS 实现垂直居中的几种方法(必看)
12-13
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式...
css布局网页水平居中常用方法
10-30
以下我们将深入探讨几种常用的CSS布局网页水平居中的方法。 1. **Text-align 属性** 在IE浏览器中，可以通过设置`body`元素的`text-align`属性为`center`来实现整个页面的水平居中。同时，为了确保内容不被居中，...
WEB前端CSS居中的几种方法共4页.pdf.zip
10-30
以下将详细讲解几种常用且有效的CSS居中方法。 1. **水平居中** - **Text-align属性**：适用于内联元素或块级元素容器。设置`text-align: center;`可以使容器内的文本和内联元素水平居中。 ```css .container...
元素水平垂直居中的几种方法
01-20
首先，我们来看第一种方法，通过`margin: auto`实现水平居中，但这种方法无法实现垂直居中。示例代码如下： ```css #box1 { width: 300px; height: 300px; border: 1px black solid; } #box2 { width: 100px; ...
CSS水平居中的四种方法
前端开发博客
10-31 5759
水平垂直居中，特别是使用在列表的时候经常会用到的，以前有需求的时候我也做过类似的代码，是使用display:table-cell，mg12的博客那个相关文章的列表好像就是使用这个代码来的，之前我也是参考他来的。 今天重新整理一下，并结合前人的辛劳，总结一下以作备份。 水平居中，如果知道元素的宽度，则可以使用 .cell{width:300px; margin:0 auto; text-align:center;}如果是内联元素居中，那么直接用text-align:center则行 如果未知元素宽度，并且非内
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
css居中的几种方法_css 水平居中的几种实现方式
weixin_40004212的博客
11-29 279
前言设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。实现方式1、text-align 方式text-align 是入门最常用的属性，根据字面意思是文本对齐用的。只需在父级标签上设置即可，虽然内部的子元素不管是块级元素 or 非块级元素都可以使用，但需注意块级元素会占...
css: 水平居中的几种方式
qq_36411712的博客
10-27 162
1. 块级元素设置宽度， margin ：auto; 2. text-align:center; 3. display:flex; justify-content:center; 4.transform: translateX .ddd{ width:200px; border:1px solid red; } .eee{ width:100px; text-align:center; transform: translateX(100px); ...
6种方法实现css布局水平居中
web前端开发博客
07-02 5180
说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。 方法一：margin + width 1 2 3 4 5 6 7 8 9 10 11 ...
css 水平居中垂直居中的几种方法
weixin_30466953的博客
12-06 62
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平居中垂直居中方法</title> <style> div{ width: 200px; ...
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
最新发布
07-28
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
Css实现水平居中几种方法
05-27
有以下几种方法可以使用CSS实现水平居中： 1. 使用text-align属性将文本居中。这适用于内联元素和文本块元素。 ```css .parent { text-align: center; } ``` 2. 使用margin属性将元素居中。这适用于块级元素。 ``...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值