Center text in CSS wordpress - html

Question

I'm a newbie in CSS.
I've created a website in Wordpress and I've made a new template page.
Can be found at http://jobboard.jobsbe.be/test/
I've added some CSS to make the page look like I want but there is one thing that I can't find out how to get it work.
When you look at the page you will see that I used a divider, with between the 2 dividers the word "OR".
I've tried everything that I know and found on the internet, but I can't get the word "OR" centered between the two dividers.
Who knows how I can do this?
This is my css:
/**
* The parent theme's CSS is automatically included so there is no need
* to use the #import rule to include the parent theme CSS.
*
* Place Custom CSS Below this.
*/
/**Changing color of links footer*/
.widget--footer a {
color: #7dc246;
}
/**Changing color of menu links*/
.nav-menu--primary ul li a, .nav-menu--primary li a {
color: #7dc246;
}
.nav-menu--primary ul li a:hover, .nav-menu--primary li a:hover {
color: #fff; background-color: #7dc246;
}
/**Changing style Login box*/
.nav-menu--primary ul li.highlight > a, .nav-menu--primary ul li.login > a {
border-style: solid;
border-width: 1px;
border-color: #7dc246;
color: #fff;
background-color: #7dc246;
}
.nav-menu--primary ul li.highlight > a:hover, .nav-menu--primary ul li.login > a:hover {
border-style: solid;
border-width: 1px;
border-color: #7dc246;
color: #7dc246;
}
/**Changing style menu on small screen*/
.primary-menu-toggle:before {
color: #7dc246; background-color: #fff;
}
/**Buttons Signup Page*/
.btn.btn-primary.text-capitalize.m-0 {
border-radius: 5px;
background: #7dc246;
color: #fff;
padding: 15px;
}
.o-or-divider {
color: #7d7d7d;
font-size: 20px;
font-weight: bold;
padding-top: 115px;
text-align: center;
}
*, :after, :before {
box-sizing: border-box;
}
.o-or-divider:before {
top: -10px;
}
.o-or-divider:after, .o-or-divider:before {
position: absolute;
content: "";
display: block;
padding: 55px 0;
border-left: 1px solid #7dc246;
left: 80px;
}
*, :after, :before {
box-sizing: border-box;
}
.o-or-divider:after {
top: 155px;
}
.o-or-divider:after, .o-or-divider:before {
position: absolute;
content: "";
display: block;
padding: 55px 0;
border-left: 1px solid #7dc246;
left: 80px;
}
*, :after, :before {
box-sizing: border-box;
}

Answer 1

The dividers aren't centered properly, just add left:50%; to the before and after:
.o-or-divider:after, .o-or-divider:before {
position: absolute;
content: "";
display: block;
padding: 55px 0;
border-left: 1px solid #7dc246;
left: 50%;
}

Answer 2

In fact it is your :before and :after that aren't centered.
You should had to both of them the following rule:left: 50%;
Since the container of them is already a position: relative; they will be positionned at 50% from the very left of the container.
More infos about positionning in css