Align DIV at center of page and fixed at top on scroll using CSS in Bootstrap row

nedash
 
on Apr 27, 2021 11:02 PM
2699 Views

hi

how to put div at the center of page

I want div id="Backheader" to be at the center of the page and when I scroll down it will fix the top to the page

here before I define position:fixed;

div was at the center of page but when I add position:fixed;  it went  to the left side of the page

I want it be at the center.

I define <div > in page :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<link href="Css/bootstrap.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="Scripts/bootstrap.min.js"></script>
<style type="text/css">
    #BackHeader {
        width: 1349px;
        background-color: #212121;
        height: 50px;
        color: white;
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1030 !important;
    }
    .fix1 {
        width:1000px;
        height:2000px;
        border:1px solid red;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="d-sm-inline">
            <div class="row justify-content-center text-center">
                <div id="BackHeader" class="col-auto">
                     Back Header
                </div>
                <div class="fix1"></div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Best regards

Neda

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Apr 28, 2021 03:54 AM
on May 01, 2021 05:32 AM

Hi nedash,

Refer below html and css.

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="d-sm-inline">
    <div class="row justify-content-center text-center">
        <div class="fixedContainer">
            Back Header
        </div>
        <div class="otherContainer"></div>
    </div>
</div>
<style>
    .fixedContainer {
        width: 1349px;
        height: 50px;
        background-color: #212121;
        color: white;
        position: fixed;
        padding: .8em;
        left: 50%;
        top: 0%;
        transform: translateX(-50%);
    }

    .otherContainer {
        width: 1000px;
        height: 2000px;
        border: 1px solid red;
    }
</style>

Demo