jsp 中div居中_元素居中的多种方法——css布局技巧

最新推荐文章于 2023-11-09 00:04:43 发布

段xq

最新推荐文章于 2023-11-09 00:04:43 发布

阅读量2.6k

点赞数

文章标签： jsp 中div居中

本文链接：https://blog.csdn.net/weixin_36227085/article/details/112441984

版权

本文介绍了五种让元素在父级中上下左右居中的CSS布局方法：利用定位、定位配合CSS3位移、内联块元素display:inline-block、弹性盒模型和网格布局。详细讲解了每种方法的实现思路和代码示例。

摘要由CSDN通过智能技术生成

本文作者：开课吧无忧

图文编辑：开三金

经常碰到有同学在问，如何让一个元素上下左右都居中呢？

相信大家在面试的时候也会经常碰到这个问题，一下列出来几种方式以供大家参考，如有不足之处，请大家补充

问题描述：

给定两个元素，这两个元素是父子级关系。

并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？(暂且设定父级比子级要大一些)

第一种：利用定位

先上代码及效果：

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style>        .content{
                width:500px;            height:300px;            border:1px solid #0a3b98;            position: relative;        }        .box{
                width:100px;            height:40px;            background: #f0a238;            position: absolute;            top:0;            left:0;            right:0;            bottom:0;            margin:auto;        }style>head><body> <div class="content">    <div class="box">div>div> body>html>