css定位“十字架“之水平垂直居中

最新推荐文章于 2023-12-07 09:43:02 发布

原创

最新推荐文章于 2023-12-07 09:43:02 发布 · 6.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#水平居中 #竖直居中 #div居中

本文介绍了如何使用CSS实现div的水平垂直居中，通过创建一个父级div并设置绝对定位，结合内部div布局，成功展示十字架居中效果。

1.先看要实现的效果

这里写图片描述

实际的效果图

这里写图片描述

可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。

看实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style>
        body{
    
    margin:0;padding:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhiqiang21

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS定位“十字架”之水平垂直居中

12-13

本文为大家分享了CSS定位“十字架“之水平垂直居中效果的实现方法，具体内容如下 1.先看要实现的效果实际的效果图可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。看实现代码： XML/HTML Code复制内容到剪贴板 <html> <head> <title></title> <style> body{margin:0;padding:0} /*定位父级div水平垂直居中*/

纯CSS制作水平垂直居中“十字架”

weixin_33997389的博客

04-08

378

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS制作水平垂直居中“十字架”</title> <style> body,d

1 条评论您还未登录，请先登录后发表或查看评论

使用重构的方式制作出一个水平、垂直都居中短边为50px，长边为150px的红色十字架，要求使用两个div

06-02

首先，我们创建一个div元素，它的类名为cross-container，并为它设置宽度150px、高度50px，并使用绝对定位、transform属性使它水平、垂直居中。接下来，我们在cross-container元素内部创建另一个div元素，它的类名...

使用重构的方式制作一个垂直都居中短边为50px长边为150px的红色十字架

06-02

可以使用flex布局和伪元素来实现这个需求，具体代码如下： ... ``` <div class="cross"></div> ``` CSS代码： ...首先，将容器 div 的宽度...这样就完成了一个垂直居中、短边为 50px、长边为 150px 的红色十字架的制作。

用css实现十字的布局示例代码

09-25

主要介绍了如何使用css来实现十字的布局,需要的朋友可以参考下

用css来实现十字的布局

weixin_30588675的博客

06-06

456

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><m...

css模拟上传十字架

sunnyboysix的博客

06-17

313

<div class="uploadImg"><div class="addPlus"></div></div> .uploadImg { width: 100px; height: 100px; background: #FFFFFF; border: 1px solid #DDE2EC; border-radius: 2px; position: relative; .addPlus { .

css3绘制十字架,纯css画十字架 8.21

weixin_28957683的博客

08-03

1384

好久没玩这个了，继续。绘制一个如图红色十字架，方块长150px，宽50px：要求：使用2个div完成使用3个div完成使用5个div完成两个div:html:css:.a,.b {position: absolute;left: 50%;top: 50%;background: red;}.a {width: 150px;height: 50px;}.b {width: 50px;height: ...

css画十字架和靶心图标

程序媛的博客

10-10

795

css画十字架和靶心

html制作十字架,使用重构的方式制作出一个红色十字架

weixin_35307279的博客

06-10

1439

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架使用2个div完成#heng,#shu{left:50%;top:50%;position:absolute;background-color:#f00;}#shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}#heng{width...

html图片十字形,在CSS中创建十字形

weixin_39973416的博客

06-04

783

您可以使用只有伪元素的方式来实现：#cross {width: 100px;height: 100px;position: relative;}#cross:before,#cross:after {content: "";position: absolute;z-index: -1;background: #d00;}#cross:before {left: 50%;width: 30%;mar...

HTML+CSS大风车及十字架的实现

记录编程生活

08-31

5620

说起大风车勾起了多少人的回忆，我们今天就利用CSS做一个大风车并且让它转起来。首先还是老规矩——先上效果图：一................ 不是说好了转起来的吗？怎么在哪

前端小练——CSS如何做十字图样

m0_45293340的博客

07-18

1822

CSS如何做十字图样

css布局技巧：元素居中技巧

xiaoweids的博客

05-05

364

但是这个属性有一个缺点：需要一个参照物，也就是说如果父级里面有两个子元素，两个子元素都设置了vertical-align:middle，那么得到的效果只是这两个元素之间居中对齐而已。效果图就不看了吧，思路感觉也没啥可解释的，这都是css3的功劳，没啥技巧，掌握了弹性盒模型就能掌握这个方法，简单粗暴。当然了，如果说你在实际布局中，确实有两个元素，并且其中一个元素可以设置为高度百分百的话，这么做是可以的。小技巧一：把其中一个元素设置高度百分百，那么这时候另一个元素就会处于父级上下居中的位置了。

2个DIV制作十字架

zhu1988renhui的专栏

05-04

4801

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd 十字架制作 body { margin:0; height:100%; width:100%; } #h { width:100%; heig

css 十字分割线（含四等分布局）